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

Question

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

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

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

一个示例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>