粘性元素无法在带有溢出的嵌套flex容器中工作(safari)

Question

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

请注意：这种行为在Chrome/Edge/FFirefox中很好，但在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>

对于遇到类似问题并想了解粘性的人来说，有用的链接：

堆叠上的链路1

堆叠上的链路2

Answer 1

这并不是这个问题的完整答案，因为它涉及到以一种可能不适用于所有情况的方式更改HTML，但如果我们将第一个和第二个div分别放在它们自己的容器中，那么Safari(在iPadIOS14上测试(就会达到预期效果。

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