flex子项高度不同时position:sticky与bottom属性的失效问题

需求描述 #

flex容器包含两个高度不同的子项：左侧较短的viewer需要实现以下滚动行为：

• 初始状态与右侧side-rail顶部对齐
• 页面滚动时随容器同步移动，当viewer到达容器底部位置后固定
• 直至整个容器（含右侧较长的side-rail）完全滚动出视口，最终两者底部对齐

现有代码问题 #

当前给viewer设置sticky且bottom:0，会让它一开始就试图粘在容器底部，不符合“先随滚动移动，再固定”的需求；同时容器设置了固定高度2220px，导致粘性定位的参考边界与实际内容高度不匹配。

解决方案（纯CSS实现） #

调整容器布局逻辑和粘性定位参数，让viewer的行为分阶段触发：

.wrapper {
  padding: 2rem;
  background: lightgrey;
}
.container {
  margin-inline: max(0px, ((100% - 1440px) / 2));
  display: flex;
  gap: 1rem;
  
  > * {
    border: 1px solid;
  }
}

.viewer {
  height: 1400px;
  flex-grow: 3;
  position: sticky;
  top: 0;
  bottom: 0;
  align-self: flex-start;
  background: white;
}

.side-rail {
  height: 2190px;
  flex-grow: 1;
  background: white;
}

html,
body {
  margin: 0;
}

<div class="wrapper">
  <div class="container">
    <div class="viewer">Viewer</div>
    <div class="side-rail">Side rail</div>
  </div>
</div>

原理说明 #

1. 移除容器固定高度：让容器由较高的side-rail自然撑开，确保粘性定位的参考边界是容器的实际内容高度。
2. 双阈值粘性定位：给viewer同时设置top:0和bottom:0，配合align-self:flex-start：
   • 滚动初期：viewer保持顶部对齐，随页面滚动同步移动（top:0生效）。
   • 滚动中期：当viewer底部到达容器底部时，bottom:0触发，元素固定在容器底部位置。
   • 滚动末期：整个容器完全滚动出视口时，viewer与side-rail同步离开，最终底部对齐。

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