Flex布局中position: sticky属性未按预期生效问题求助

我做了一个基础的Wiki布局，包含导航栏和文章内容区。想要滚动文章内容时导航栏固定在顶部，所以设置了对应的CSS属性。主布局用flex row让两个子元素等高；导航栏所在容器和文章内容等高，且给导航栏设置了position: sticky和top: 0，但这个属性没生效。已经搜过解决方案但没解决。

HTML布局 #

<div className="wiki-page">
  <div id="menu-bar-container">
    <div id="menu-bar">
      <h2>Quelle.s interrogation.s as-tu ?</h2>
      <div id="links">
        ...Useful links (list of <a>)
      </div>
    </div>
  </div>
  <div id="wiki-content">
    ...The article (div)
  </div>
</div>

Sass代码 #

.wiki-page {
  position: relative;
  width: 100%;
  @include flex(row, space-between, stretch);

  #menu-bar-container {
    position: relative;
  }

  #menu-bar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 500px;
    max-height: calc(100vh - $margin * 2);
  }

  #wiki-content {
    width: 100%;
    @include flex(column, start, start);
  }
}

页面渲染尺寸符合预期，但sticky效果没实现，求帮助🙏

解决方案 #

问题出在flex容器的align-items: stretch（即你用的@include flex(row, space-between, stretch)里的第三个参数），这个属性会让#menu-bar-container被拉伸到和#wiki-content一样的高度。而position: sticky的元素是相对于父级滚动容器定位的，当父级容器高度和页面内容高度一致时，sticky元素没有滚动空间，自然不会触发固定效果。

修复步骤： #

1. 给#menu-bar-container设置align-self: flex-start，阻止它被拉伸到内容区等高：

#menu-bar-container {
  position: relative;
  align-self: flex-start; // 添加这一行
}

2. 检查body或.wiki-page是否设置了overflow: hidden，如果有需要移除——sticky效果依赖父级容器允许滚动。

原理说明： #

flex子元素被stretch拉伸后，容器高度与页面内容高度一致，sticky元素在容器内没有滚动偏移的空间，无法触发固定行为。让容器align-self: flex-start后，它的高度由内部的#menu-bar决定，页面滚动时，#menu-bar就会相对于视口固定在顶部。

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