如所述，但这里没有回答:position: -webkit-sticky只工作到Safari(12.1.1)中flexbox子容器的高度
这是一个持续的问题，很容易复制:https://jsfiddle.net/4ea9mdkn/
.flexbox-wrapper {
display: flex;
}
.overflow-box {
background-color: blue;
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: red;
}<div class="flexbox-wrapper">
<div class="content-wrapper">
<div class="overflow-box">
This is the regular box
<div class="sticky">
This is the sticky box
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
</div>
</div>
</div>有人知道修复这个吗?
据我所知，Safari还不支持粘贴。所以你必须用绝对位置。这是我对你的css所做的，我希望它能工作。
*{
margin: 0;
padding: 0;
}
.flexbox-wrapper {
display: flex;
width: 100%;
}
.regular {
width: 100%;
background-color: blue;
height: 200px;
overflow: auto;
padding: 10px;
padding-top: 25px;
}
.sticky {
width: 100%;
-webkit-transform: translateZ(0);
position: fixed;
top: 0;
left: 0;
background-color: red;
}
我找到了这个解决方案。我在Safari上试过，它正在工作。我发现我们不应该把任何其他元素放在sticky和它的父元素之间。此外，我们不应该在父元素中隐藏overflow:。下面是代码
.flexbox-wrapper {
display: flex;
overflow: auto;
}
.regular {
background-color: blue;
height: 200px;
overflow-y: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: red;
}
<div class="flexbox-wrapper">
<div class="mouse">
<div class="sticky">
This is the sticky box
</div>
<div class="regular">
This is the regular box
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis accusamus iure voluptatum, repellat illum excepturi saepe quam neque incidunt eius rerum voluptatem accusantium doloribus voluptas obcaecati nemo assumenda. Culpa, suscipit.</p>
</div>
</div>
</div>