粘性元素在带有溢出的嵌套弹性容器中不起作用（野生动物园）

Question

我在启用了overflow:auto 的嵌套弹性容器中遇到了一个粘性元素的奇怪问题。我希望粘性元素与第二个元素具有相同的高度，并且一旦滚动到阈值（top: 0），它也会粘在其包含元素的顶部。

请注意：该行为在 Chrome/Edge/Firefox 中正常，但在 Safari 中则不行。

据此，sticky 应该可以在带有前缀-webkit 的 Safari 中使用。 (https://caniuse.com/?search=sticky)

有什么好的方法可以在 Safari 中完成这项工作吗？

提前致谢。

.wrapper {
  height: 100px;
  background-color: red;
  display: flex;
}

.container {
  height: 200px;
  display: flex;
  overflow: auto;
  
}

.first {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: blue;
}

.second {
  background-color: yellow;
  height: 500px;
}

<div class="wrapper">
  <div class="container">
    <div class="first">Scroll down
    </div>
    <div class="second">Here</div>
  </div>
</div>

为遇到类似问题并想了解粘性的人提供有用的链接：

Link 1 on stackoverflow

Link 2 on stackoverflow

Answer 1

这不是问题的完整答案，因为它涉及以一种可能不适合所有情况的方式更改 HTML，但如果我们将第一个和第二个 div 中的每一个放在它们自己的容器中，那么 Safari（在 iPad 上测试IOS 14) 符合预期。

.wrapper {
  height: 100px;
  background-color: red;
  display: flex;
}

.container {
  height: 200px;
  display: flex;
  overflow: auto;
  
}

.first {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: blue;
}

.second {
  background-color: yellow;
  height: 500px;
}

<div class="wrapper">
  <div class="container">
    <div class="first">Scroll down</div>
    </div>
  <div class="container">
    <div class="second">Here</div>
    </div>
</div>