Safari位置的解决方法: sticky (-webkit-sticky)错误

Question

如果你在Safari中打开这个https://jsfiddle.net/17uwnsq6/4/ (12.1.2，但应该适用于所有最近的版本)，并开始向下滚动白色的可滚动区域，最初粘性的"Header“元素将保持粘性，但稍后将滚动出屏幕。在Chrome和Firefox中，它总是像预期的那样粘滞。

供参考的HTML和CSS：

<div class="title">Title</div>
<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
</div>

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  flex: 1 1 0;
  overflow: auto;
}

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.content {
  height: 2500px;
}

.title {
  flex: 0 0 auto;
  background-color: lightblue;
}

在使用flex布局调整容器大小时，似乎会出现这个bug。有没有人知道解决这个问题的办法？这样做的目的是使标题总是粘性的，同时调整容器的大小，使其占据“标题”留下的视口部分。

Answer 1

我想我已经弄明白了。诀窍是将可滚动容器的整个子容器(即头部和内容)放入包装器div中-这样就不会触发bug。