粘性元素在 Flex 框中不起作用 [重复]答案

【问题标题】：Sticky element is not working in Flex box [duplicate]粘性元素在 Flex 框中不起作用 [重复]
【发布时间】：2020-12-04 21:41:32
【问题描述】：

我制作了一个带有弹性框和粘性的代码。我希望蓝色 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/>

JsFiddle link

【问题讨论】：

移除溢出：auto

标签： html css flexbox sticky

【解决方案1】：

问题是包装器 div 没有 max-height 或 height 即 less than 左侧红色 div，如果您确实为包装器添加高度，您将成功获得您想要的。

并检查这个问题my-position-sticky-element-isnt-sticky-when-using-flexbox，它与您的问题有类似的问题（但不是完全重复）。

【讨论】：