我做了一个临时的折叠桌，但遇到了这个问题。为了解决这个问题，我简单地把粘性标题行放在flexbox的外面，就在它之前。

你也可以尝试在flex项目中添加一个子div，并分配位置:sticky;上图:0;到那一步。

这适用于我的两列布局，其中第一列的内容需要保持粘性，第二列显示可滚动。

确保flex-wrapper已经分配了高度，并将溢出值设置为auto。 然后将“align-self: flex-start;”添加到粘滞元素。

.flexbox-wrapper { 显示:flex; 身高:600 px;//<-必要的，并且不分配% 溢出:汽车;/ / <修复 ｝ .regular { 背景颜色:蓝色; ｝ .sticky { 位置:-webkit-sticky; 位置:粘性; 上图:0; 背景颜色:红色; align-self: flex-start;/ / <修复 ｝ < div class = " flexbox-wrapper”> < div class = "常规" > 这是普通的盒子 < / div > < div class = "粘" > 这是一个粘盒子 < / div > < / div >

从我的经验来看，全局解决方案/规则:

不要将含有粘性元素的结构直接放在{display: flex}容器中。

相反(对于flex布局)将带有粘性元素的table /div放在flex子容器中(例如，使用{flex: 11 1 auto}，但没有{display: flex})，那么一切都应该按预期工作。

由于flex box元素默认为拉伸，因此所有元素的高度都相同，不能滚动。

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

目前，所有主流浏览器都支持这个功能，但Safari仍然落后于-webkit-前缀，而除了Firefox之外的其他浏览器在位置方面存在一些问题:粘表。

.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

如果你在父元素中使用flex，请使用align-self: flex-start用于你想要设置为sticky的元素。

position: sticky;
align-self: flex-start;
top: 0;
overflow-y: auto;