css - 我的位置 : sticky element isn't sticky when using flexbox

Question

我被困在这个问题上有一段时间了，我想我会分享这个position: sticky + flexbox gotcha:

我的粘性 div 工作正常，直到我将我的 View 切换到一个 flex 盒容器，突然间当它被包裹在一个 flexbox 父容器中时，它不再是粘性的。

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

JSFiddle showing the problem

Answer 1

由于 flex box 元素默认为 stretch，因此所有元素的高度都相同，无法滚动。

向粘性元素添加 align-self: flex-start 将高度设置为自动，允许滚动，并修复它。

目前这是supported在所有主流浏览器中，但 Safari 仍然在 -webkit- 前缀之后，除 Firefox 之外的其他浏览器在 position: sticky 表方面存在一些问题。

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* Not necessary -- for example only */
}
.regular {
  background-color: blue; /* Not necessary -- for example only */
  height: 600px;          /* Not necessary -- for example only */
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */
  background-color: red;  /* Not necessary -- for example only */
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

JSFiddle showing the solution