Flex容器子元素设置position:sticky失效问题求助

问题背景 #

采用双栏Flex布局，左侧栏包含顶部Logo和下方菜单，期望页面向下滚动时，Logo随页面上滑消失，蓝色菜单固定在页面顶部。但即使给Flex子元素设置align-self: flex-start，菜单仍会随Logo一起上滑消失。

解决方案 #

核心问题在于：设置了align-self: flex-start的Flex子元素（.SideOne）高度仅为自身内容高度，导致内部的sticky元素没有足够的滚动空间触发粘性定位。

解决步骤：

• 移除.SideOne的align-self: flex-start，让Flex容器自动将其高度拉伸至与右侧栏一致（默认align-items: stretch），确保左侧栏高度足够覆盖页面滚动范围。
• 保留.MyStickMenu的position: sticky和top: 0设置，此时它会相对于高度足够的父容器（.SideOne）实现粘性定位，在页面滚动时固定在顶部。

修改后的代码 #

SCSS代码 #

.PageContainer {
  .OuterContainer {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    
    .SideOne {
      background-color:#fee;  
      width: 10em;
      
      .CompanyLogo {
        img {
          width: 100%;
        }
      }
      
      .MyStickMenu {
        border:1px solid blue;
        background-color:#eef;
        position: sticky;
        top: 0;
      }
    }

    .SideTwo {
      background-color:#ddd;
      flex-grow: 1;
      flex-shrink: 1;
    }
  }
}

HTML代码 #

<div class="PageContainer">
  <div class="OuterContainer">
    <div class="SideOne">
      <div class="CompanyLogo">
        <img src="https://via.placeholder.com/250x100.png" alt="" />
      </div>
      <div class="MyStickMenu">
        <h2>
          Now Sticky Menu
        </h2>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Away</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="SideTwo">
      <h1>
        Scrollable page
      </h1>
      <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
    </div>
  </div>
</div>

原理说明 #

当Flex子元素（.SideOne）被拉伸至与右侧栏等高后，它的高度会覆盖整个页面滚动区域。此时内部的sticky元素（.MyStickMenu）会以.SideOne为参照容器，当页面滚动到Logo离开视口时，菜单会固定在容器顶部（即页面左侧顶部），直到滚动至容器底部。

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