Flexbox容器下position:sticky失效，如何不设父容器高度修复？

问题根源 #

Flex容器下的position: sticky失效，通常和两个核心点有关：

1. 滚动上下文被截断：如果sticky元素的任何祖先容器（包括父容器.container）设置了overflow: hidden/auto/scroll，sticky会相对于该祖先生效，而非整个页面。你提到不想给父容器设高度和overflow，这点是对的，但要确保所有祖先都保持默认的overflow: visible。
2. 没有触发滚动的空间：sticky只有当页面滚动距离超过它的top值，且父容器的内容高度大于sticky元素高度时才会生效。如果你的.div1内容不够长，页面没滚动条，自然看不到固定效果。

修复方案 #

调整样式如下：

父容器样式（保留核心设置，移除干扰项）

.container{
   display: flex; 
   justify-content: space-between; 
   align-items: flex-start; /* 保持这个，避免flex项被拉伸 */
   /* 不要设置height、overflow属性 */
}

固定元素.div2样式（补充关键属性）

.div2 {
    position: sticky;
    top: 0;
    height: 100dvh;
    align-self: flex-start;
    flex-shrink: 0; /* 防止被flex容器压缩宽度 */
    /* 可选：固定宽度，避免自适应时宽度变化 */
    width: 300px;
}

额外注意事项 #

• 确保.div1的内容高度足够长（比如超过100dvh），让页面产生滚动条，否则sticky没有触发条件。
• 检查body的overflow-x:hidden不会影响垂直滚动，但要确认body和html没有设置overflow-y:hidden，否则整个页面无法滚动，sticky也不会生效。
• 排查所有祖先元素，确保没有设置overflow: hidden/auto/scroll，这是sticky失效的常见坑。

内容的提问来源于stack exchange，提问作者Aidyn Ibrayev