Position sticky在固定侧边栏元素上无法正常工作的问题求助

我有如下包含侧边栏和主内容的简单布局，由于使用第三方库，只能新增元素无法移除现有元素。希望实现页面滚动时，侧边栏内容保持固定（右侧内容可滚动）。已添加sticky和top相关属性，但未达到预期效果，请问问题出在哪里？

现有代码 #

CSS #

.sui-layout-body__inner {
  display: flex;
  padding: 0;
  margin: 0;
  padding-top: 40px;
  max-width: 100%;
}

.sui-layout-sidebar {
  background-color: lightgrey;
  width: 376px;
  padding-left: 50px;
  display: block;
  flex: 0 0 auto;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.sui-layout-main {
  width: 74.25%;
  display: block;
  flex: 0 0 auto;
  padding-left: 16px;
}

.main-content {
  background-color: lightgreen;
  height: 250px;
  width: 100%;
  margin-top: 40px;
}

HTML #

<div class="sui-layout-body__inner">
  <div class="sui-layout-sidebar">
    <ul>
      <li>Sidebar element 1</li>
      <li>Sidebar element 2</li>
      <li>Sidebar element 3</li>
      <li>Sidebar element 4</li>
      <li>Sidebar element 5</li>
      <li>Sidebar element 6</li>
      <li>Sidebar element 7</li>
      <li>Sidebar element 8</li>
    </ul>
  </div>
  <div class="sui-layout-main">
    <div class="main-content"></div>
    <div class="main-content"></div>
    <div class="main-content"></div>
    <div class="main-content"></div>
  </div>
</div>

问题原因 #

核心问题出在Flex布局的默认拉伸行为：

• Flex容器（.sui-layout-body__inner）默认align-items值为stretch，会强制侧边栏（.sui-layout-sidebar）拉伸至与主内容区域等高。
• 当侧边栏高度与父容器（Flex容器）高度完全一致时，position: sticky无法触发固定效果——元素本身已占满父容器垂直空间，没有滚动偏移量来激活sticky定位。

解决方法 #

结合你只能新增元素或修改样式的限制，提供两种可行方案：

方案1：修改侧边栏对齐方式（无需新增元素） #

给侧边栏添加align-self: flex-start，让其高度由自身内容决定，而非被Flex容器拉伸：

.sui-layout-sidebar {
  /* 保留原有样式 */
  align-self: flex-start; /* 新增该行 */
}

方案2：给侧边栏套一层容器（适合无法修改原有侧边栏样式的场景） #

在现有侧边栏外层新增容器，给该容器设置sticky定位：

<div class="sui-layout-body__inner">
  <!-- 新增sticky容器 -->
  <div class="sidebar-sticky-wrapper">
    <div class="sui-layout-sidebar">
      <!-- 原有侧边栏内容 -->
    </div>
  </div>
  <div class="sui-layout-main">
    <!-- 原有主内容 -->
  </div>
</div>

对应CSS：

.sidebar-sticky-wrapper {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  flex: 0 0 auto;
  width: 376px;
}

两种方案均可实现页面滚动时侧边栏固定、主内容正常滚动的效果。

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