由于flex box元素默认为
stretch,因此所有元素都具有相同的高度,无法滚动。
将添加
align-self: flex-start到粘性元素的高度设置为auto,可以滚动并固定它。
当前,所有主流浏览器均支持此功能,但Safari仍在
-webkit-前缀后面,并且除Firefox以外的其他浏览器在
position:sticky表方面存在一些问题。
.flexbox-wrapper { display: flex; overflow: auto; height: 200px; }.regular { background-color: blue; height: 600px; }.sticky { position: -webkit-sticky; position: sticky; top: 0; align-self: flex-start; background-color: red; }<div > <div > This is the regular box </div> <div > This is the sticky box </div></div>


