CSS 我的立场：粘性元素在使用 flexbox 时不粘性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44446671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
My position: sticky element isn't sticky when using flexbox
提问by BHOLT
I was stuck on this for a little bit and thought I'd share this position: sticky+ flexbox gotcha:
我被困在这个问题上，并认为我会分享这个position: sticky+ flexbox 问题：
My sticky div was working fine until I switched my view to a flex box container, and suddenly the div wasn't sticky when it was wrapped in a flexbox parent.
我的粘性 div 工作正常，直到我将视图切换到 flex box 容器，当它被包裹在 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>回答by BHOLT
Since flex box elements default to stretch, all the elements are the same height, which can't be scrolled against.
由于 flex box 元素默认为stretch，所有元素都具有相同的高度，不能滚动。
Adding align-self: flex-startto the sticky element set the height to auto, which allowed scrolling, and fixed it.
添加align-self: flex-start到粘性元素将高度设置为自动，允许滚动，并修复它。
Currently this is supportedin all major browsers, but Safari is still behind a -webkit-prefix, and other browsers except for Firefox have some issues with position: stickytables.
目前，所有主要浏览器都支持这一点，但 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>回答by TheoPlatica
In my case, one of the parent containers had overflow-x: hidden;applied to it, which will break position: stickyfunctionality. You'll need to remove that rule.
就我而言，其中一个父容器已overflow-x: hidden;应用于它，这将破坏position: sticky功能。您需要删除该规则。
No parent element should have the above CSS rule applied to it. This condition applies to all parents up to (but not including) the 'body' element.
任何父元素都不应应用上述 CSS 规则。此条件适用于（但不包括）'body' 元素之前的所有父元素。
回答by Simon_Weaver
You can also try adding a child div to the flex item with the contents inside and assign position: sticky; top: 0;to that.
您还可以尝试将子 div 添加到包含内容的 flex 项并分配position: sticky; top: 0;给它。
That worked for me for a two column layout where the contents of the first column needed to be sticky and the second column appear scrollable.
这对我来说适用于两列布局，其中第一列的内容需要粘性，而第二列显示为可滚动。
