position sticky在Flexbox布局中无法完整滚动的问题求助

问题根源在Flex布局的默认行为：.sidebar作为flex子元素，会被默认的align-items: stretch属性拉伸到和.main一样的高度（1500px）。而你的sticky元素.sidebar__widget是相对于.sidebar这个父容器生效的——因为.sidebar高度远大于自身内容高度，页面滚动时，只要.sidebar还在视图范围内，sticky元素就会一直固定在顶部，只有等.main的1500px内容完全滚完、.sidebar即将离开视图时，sticky元素才会跟着滚动，导致text5迟迟无法显示。

修复方案 #

给.sidebar添加align-self: flex-start，让它的高度由内部内容决定，不再被拉伸到和.main等高：

.sidebar {
  flex: 0 0 33.3333%;
  background: gray;
  align-self: flex-start; /* 关键修复代码 */
}

修改后，.sidebar的高度会匹配.sidebar__widget的内容高度，sticky元素的粘性范围和自身内容高度对齐，滚动页面时就能正常看到text5，无需等待滚完所有后续内容。

验证后的完整代码 #

CSS代码

.header,
.footer {
  text-align: center;
  height: 300px;
  background: white;
}

.container {
  display: flex;
  width: 600px;
  margin: 0 auto;
  background: #fafafa;
}

.main {
  flex: 0 0 66.6666%;
  height: 1500px;
}

.sidebar {
  flex: 0 0 33.3333%;
  background: gray;
  align-self: flex-start;
}

.sidebar__widget {
  position: sticky;
  top: 0;
  background: yellow;
}

.margins {
  padding-top: 30px;
  padding-bottom: 30px;
}

HTML代码

<header class="header">header</header>

<div class="container">
  <div class="main">Main</div>
  
  <aside class="sidebar">
    <div class="sidebar__widget">
      <div class="margins">
        text2
      </div>
      <div class="margins">
        text3
      </div>
      <div class="margins">
        text4
      </div>
      <div class="margins">
        text5
      </div>
    </div>
  </aside>
</div>

<footer class="footer">footer</footer>

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