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

每个列也是一个flex容器。 我希望使侧栏的第二项具有粘性，这样当您向下滚动时，它将保持可见，直到页面结束

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

但是看起来这个项目很棒，但并不是一直到页面的结尾。 我错过了什么？

我尝试了一些答案，比如我的立场:使用flexbox时，粘滞元素并不粘滞，但我没能让它工作。

演示:https://codepen.io/avneri/pen/ylonzvy

null

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

null