flex布局父容器下的sticky子侧边栏不生效是什么原因？

粘性效果失效的核心问题和排查方向 #

你提供的代码里首先有一个直接导致效果不生效的配置：.side-bar设置了display: none，元素默认隐藏，自然看不到粘性效果，先删除该属性或者修改为对应的显示规则（比如display: block）。

你已经给侧边栏加了align-self: start，已经避免了flex布局下子项高度被自动拉伸导致的sticky失效问题，这部分配置是正确的。如果修改display后依然不生效，可以对照以下常见问题排查：

• 父容器高度不足：sticky元素的粘性作用范围仅限于父容器的可视区域内，如果右侧.content高度不够，没有撑高父容器.container，父容器高度和侧边栏高度一致，滚动时父容器会直接滑出视口，侧边栏没有停留空间就不会触发粘性效果，需要保证内容区高度足够。
• 父级存在overflow限制：检查.container以及所有上层父元素，只要有任意一层设置了overflow: hidden、overflow: auto、overflow: scroll这类非visible的overflow值，都会导致sticky失效，需要将对应属性值改为visible。
• 偏移值配置问题：你已经设置了top: 1rem符合sticky的生效要求，如果页面有固定头部导航遮挡粘性效果，可以适当调大这个top值。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung