使用 CSS 使 flex 容器的第二项具有粘性

Question

我有一个包含两列的弹性容器。

每一列也是一个弹性容器。我希望将侧栏的第二项设置为粘性，这样当您向下滚动时它会一直显示到页面末尾

在我的示例中，您可以看到我尝试使用 position: sticky;

但似乎该项目粘住了，但没有一直粘到页面末尾。我错过了什么？

我尝试了一些答案，例如，但我没能成功。

演示：https://codepen.io/avneri/pen/yLONZVy

.page-container {
  display: flex;
  justify-content: space-evenly;
}

.column-container {
  max-width: 50%;
}

.item-wrapper  {
  display: flex;
  flex-direction: column;
}

.item {
  min-width: 150px;
  margin: 15px;
  padding: 30px;
  background: red;
  text-align: center;
}

.sticky {
  background: green;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

<div class="page-container">
    <div class="column-container">
      <div class="item-wrapper">
        <div class="item">
          Item 1
        </div>
        <div class="item">
          Item 2
        </div>
        <div class="item">
          Item 3
        </div>
        <div class="item">
          Item 4
        </div>
        <div class="item">
          Item 5
        </div>
         ...
      </div>
    </div>
    <div class="column-container">
      <div class="item-wrapper">
        <div class="item">
          Side item 1
        </div>
        <div class="item sticky">
          Side item 2
        </div>
      </div>
    </div>
  </div>

Answer 1

这是因为第二列的内包装没有延伸到全高； sticky 不会让元素超出其容器的限制。

尝试添加 height: 100%; 如下（我用 class 做到了）：

.page-container {
  display: flex;
  justify-content: space-evenly;
}

.column-container {
  max-width: 50%;
}

.item-wrapper  {
  display: flex;
  flex-direction: column;
}

.item {
  min-width: 150px;
  margin: 15px;
  padding: 30px;
  background: red;
  text-align: center;
}

.sticky {
  background: green;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.full-height {
  height: 100%;
}

<div class="page-container">
    <div class="column-container">
      <div class="item-wrapper">
        <div class="item">
          Item 1
        </div>
        <div class="item">
          Item 2
        </div>
        <div class="item">
          Item 3
        </div>
        <div class="item">
          Item 4
        </div>
        <div class="item">
          Item 5
        </div>
         ...
      </div>
    </div>
    <div class="column-container">
      <div class="item-wrapper full-height">
        <div class="item">
          Side item 1
        </div>
        <div class="item sticky">
          Side item 2
        </div>
      </div>
    </div>
  </div>

使用 CSS 使 flex 容器的第二项具有粘性

Making the second item of flex container sticky with CSS

html

css

sticky

flexbox