为何position sticky在嵌套flex容器中未按预期生效？

你的问题核心在于position: sticky的生效逻辑，以及嵌套flex布局下滚动上下文的变化：

为何第一个代码生效，第二个失效？ #

在第一个代码中：

• 滚动容器是.container（display: flex+overflow-x: auto，横向flex布局）
• 粘性元素是滚动容器的直接子元素，left: 0的定位相对滚动容器左边界。横向滚动时，元素到达容器左边缘后固定，完全符合sticky的工作机制。

在第二个代码中：

• 滚动容器仍是.container，但它是纵向flex布局（flex-direction: column），内部的.sub-container是独立的横向flex容器
• 粘性元素是.sub-container的子元素，而.sub-container会作为一个整体在.container中横向滚动。此时粘性元素的left: 0虽相对.container，但它被限制在.sub-container的范围内——当.sub-container整体向左滚动时，粘性元素会跟着父容器移动，无法独立固定到.container的左边界。

解决方案 #

根据需求，有两种常见处理方式：

方案1：让每个子容器独立横向滚动 #

如果希望每个.sub-container可单独横向滚动，修改CSS如下：

.container {
    display: flex;
    flex-direction: column;
    /* 移除overflow-x: auto，让子容器自行处理滚动 */
    position: relative;
}

.sub-container {
    display: flex;
    overflow-x: auto; /* 给每个子容器添加横向滚动 */
    margin-bottom: 8px; /* 可选，增加行间距 */
}

此时每个.sub-container成为独立滚动容器，粘性元素会相对各自子容器的左边界固定，滚动时正常生效。

方案2：实现整体横向滚动（所有行同步滚动） #

如果需要所有.sub-container一起横向滚动，调整布局结构以修正滚动上下文：

.container {
    overflow-x: auto;
    position: relative;
}

.sub-container {
    display: flex;
    width: max-content; /* 让子容器宽度由内部元素撑开 */
    margin-bottom: 8px;
}

这样调整后，整个.container横向滚动时，第一行的红色粘性元素会固定在左边界，所有行同步滚动。

内容的提问来源于stack exchange，提问作者Miguel Angel GEQ