我的位置：使用flexbox时，粘性元素不粘性

Z时代
2024-01-10
分类：问答

我对此稍作停留，以为我会分享这个position: sticky+ flexbox陷阱：

在将视图切换到Flex Box容器之前，我的粘性div工作正常，并且当将div包裹在flexbox父级中时，div突然变得不粘性。

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

回答：

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

将添加align-self: flex-start到粘性元素的高度设置为auto，可以滚动并固定它。

当前，所有主流浏览器均支持此功能，但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>