带有嵌套元素的 CSS 粘性位置

Question

据我所知，在离开框架之前，粘性位置会粘在它的容器上。

我的问题是我有一些嵌套的容器和其中的粘性元素，并希望它坚持它的祖父母。

有人可能会建议我会冒泡我内心的粘性孩子，但问题是它必须留在它的父级内部，因为父级是一个包含两个元素的 flexbox，我希望其中一个元素具有粘性，同时允许另一个元素在溢出时滚动。

一个示例 html：

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>

和样式：

.inner-container {
  display: flex;
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 0;
}

假设它main-container是可滚动的并且inner-container正在滚动。

我知道css没有支持明确的解决方案，问题是是否有任何技巧可以处理它。

Answer 1

不确定您要做什么，但这是否接近您所需要的？

.inner-container {
  display: flex;
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 0;
  width: 100px;
  height: 30px;
  justify-self: flex-start;
  background-color: green;
}

.non-sticky {
  background-color: blue;
  width: 100%;
  flex-grow: 5;
  flex-shrink: 5;
}

.main-container {
  height: 140px;
  overflow: scroll;
}

.inner-container {
  height: 300px;
}

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>