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

一尘不染

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

css

我对此稍作停留，以为我会分享这个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>

阅读 364

2020-05-16

共1个答案

一尘不染

由于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>

2020-05-16