制作 child 元素 position:sticky

Question

我想问是否可以有一个具有动态元素高度的粘性元素。并且粘性元素将自身定位为 parents 高度？并且只有一个滚动条，而且只有 CSS。对于我所读到的内容，sticky 通常需要一个定义的高度并且不能处理动态高度。

但也许有人知道如何实现我正在寻找的东西。

.wrapper {
  max-height: 40vh;
  overflow: auto;
  border: solid 1px black;
}
.innerWrapper {
  overflow: auto;
  display: flex;
  border-top: solid 1px black;
}
.sticky{
  flex-basis: 50%;
  position: sticky;
  top: 0;
}

<div class="wrapper">
  <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
</div>

Answer 1

去除溢出并调整对齐方式：

.wrapper {
  max-height: 40vh;
  overflow: auto;
  border: solid 1px black;
}
.innerWrapper {
  /*overflow: auto;*/
  display: flex;
  border-top: solid 1px black;
  align-items:flex-start;
}
.sticky{
  flex-basis: 50%;
  position: sticky;
  top: 0;
}

<div class="wrapper">
  <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
</div>

溢出问题的相关问题：

对于对齐，您应该注意默认情况下它的拉伸，因此粘性元素已经是全高

更多详情：Why bottom:0 doesn't work with position:sticky?

制作 child 元素 position:sticky

Make child element position:sticky

html

css

sticky