Flex布局元素堆叠时sticky元素无法置顶的解决方法

我有一个包含两个子元素的flex容器div，桌面全屏时一个子元素作为侧边栏，小屏时元素会垂直堆叠。我想添加一个导航用的sticky元素，宽屏时它能正常置顶，但窄屏时会随页面滚动消失，Safari和Firefox里都有这个问题。

相关代码如下：

CSS #

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.with-sidebar > :first-child {
  flex-basis: 20rem;
  flex-grow: 1;

  background-color: green;
}

.with-sidebar > :last-child {
  flex-grow: 999;
  min-inline-size: 50%;

  background-color: red;
}

.sticky {
  position: sticky;
  top: 1rem;
}

HTML #

<div class="with-sidebar">
  <div>
    <h1>Sidebar</h1>
      <div style="height:10rem">Spacer</div>
    <div class="sticky">
      <h1>Sticky Element</h1>
    </div>
  </div>
  <div>
    <h1>Not Sidebar</h1>
    <div style="height:200rem">Spacer</div>
  </div>
</div>

我试过把sticky元素包在其他元素里，也给sticky加过align-self: flex-start;，都没用。怎么让这个sticky元素在侧边栏和主内容并排、垂直堆叠时都能保持置顶？

更新 #

把.with-sidebar放到更高层级的容器里后，发现非侧边栏元素会把sticky元素推出屏幕，这种情况只在元素垂直堆叠时出现。

更新后的HTML：

<div style="height: 400rem">
  <div class="with-sidebar">
    <div>
      <h1>Sidebar</h1>
        <div style="height:10rem">Spacer</div>
        <div class="sticky">
          <h1>Sticky Element</h1>
        </div>
    </div>
    <div>
      <h1>Not Sidebar</h1>
      <div style="height:60rem">Spacer</div>
    </div>
  </div>
</div>

问题根源是flex垂直堆叠时，侧边栏子元素会被默认拉伸到和主内容一样的高度，导致sticky元素的父容器高度被拉得过长，sticky失去了“粘性”的参照范围。

修复步骤 #

1. 给侧边栏子元素加align-self: start
   这条属性会阻止侧边栏被flex容器拉伸，让它保持自身内容的高度，这样sticky元素的父容器就不会被过度拉长，窄屏时就能正常置顶。

2. 可选：宽屏时保持侧边栏高度匹配主内容
   如果需要宽屏时侧边栏和主内容视觉高度一致，可以用媒体查询单独设置，不影响窄屏的sticky效果。

修改后的CSS：

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.with-sidebar > :first-child {
  flex-basis: 20rem;
  flex-grow: 1;
  background-color: green;
  /* 核心修复：避免窄屏时被拉伸 */
  align-self: start;
}

.with-sidebar > :last-child {
  flex-grow: 999;
  min-inline-size: 50%;
  background-color: red;
}

.sticky {
  position: sticky;
  top: 1rem;
}

/* 可选：宽屏时让侧边栏高度适配视口 */
@media (min-width: 768px) {
  .with-sidebar > :first-child {
    min-height: 100vh;
  }
}

额外说明 #

如果是嵌套容器导致的问题（比如你更新里的外层高容器），给.with-sidebar也加上align-self: start，避免它被外层容器拉伸，就能解决sticky被推出屏幕的问题。

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