我的立场：使用 flexbox 时粘性元素不粘性

小编典典

我的立场：使用 flexbox 时粘性元素不粘性

all

我在这个问题上停留了一段时间，并认为我会分享这个position: sticky+ flexbox gotcha：

我的粘性 div 工作正常，直到我将视图切换到 flex box 容器，突然 div 被包裹在 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 显示问题

阅读 74

2022-07-28

共1个答案

小编典典

由于弹性盒元素默认为stretch，因此所有元素的高度相同，无法滚动。

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

目前所有主流浏览器都支持这一点，但 Safari 仍然落后于前缀，除
Firefox 之外的其他浏览器在表格-webkit-方面存在一些问题。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 显示解决方案

2022-07-28