如何解决粘滞元素在Flex框中不起作用
我已经用flex box和粘性创建了代码。 我希望蓝色div保持粘性,红色div保持长且可滚动 另外,围绕红色和蓝色div的包装位于居中位置。
但是,蓝色div随着我滚动而移动。
.wrap {
display: flex;
overflow: auto;
align-items: flex-start;
width: 200px;
margin-left: auto;
margin-right: auto;
}
.left {
margin: 0;
background: red;
width: 100px;
}
.right {
margin: 0;
background: blue;
width: 100px;
position: -webkit-sticky;
position: sticky;
top: 10px;
}
<div class="wrap">
<div class="left">
Hello<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="right">
World
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
解决方法
问题是包装器div的左边红色div没有max-height
或height
(即less than
),如果您确实向包装器添加了高度,您将得到想要成功。
并检查问题my-position-sticky-element-isnt-sticky-when-using-flexbox,该问题与您的问题类似(但不完全相同)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。