位置粘性在我的固定侧边栏元素上无法正常工作？

Question

我有以下简单标记，其中包括侧边栏和主要内容。我可以添加其他元素，但无法删除现有元素（使用库）。我想更新代码，以便页面可以正常滚动，但侧边栏内容保持固定（而右侧内容滚动）。

我已经添加了明显的 Sticky 和 Top 类，但它仍然无法按预期工作，任何人都可以指出我哪里出错了？

.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;
}

<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>

Answer 1

您需要将

align-self: flex-start

添加到侧边栏

.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;
align-self: flex-start;
}

.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;
}

<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>