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

Question

我被这个问题困住了一段时间，并认为我会分享这个position: sticky + flexbox gotcha：

在我将视图切换到弹性盒容器之前，我的粘性 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>

JSFiddle showing the problem

Answer 1

如果您在父元素中使用 flex，请使用 align-self: flex-start 作为您想要粘性的元素。

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

Answer 2

根据我的经验的全球解决方案/规则：

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

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

Answer 3

对于我的情况，align-self: flex-start（或justify-self: flex-start）解决方案不起作用。我还需要保留overflow-x: hidden，因为有些容器会水平滑动。

我的解决方案需要嵌套 display: flex 和 overflow-y: auto 以获得所需的行为：

• header可以动态调整高度，防止玩position: absolute或position: fixed
• 内容垂直滚动，水平限制在视图宽度内
• sticky 元素可以垂直放置在任何地方，粘在页眉的底部
• 其他元素可以水平滑动
  • 看起来 SO sn-p 工具无法在子元素上渲染 width 以正确演示水平幻灯片，或者我的实际布局中可能还有其他设置可以使其正常工作...
  • 请注意，为了让overflow-x: auto 在具有overflow-x: hidden 的父元素下的元素中正常工作，需要一个不执行任何其他操作的包装元素

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

body>header {
  background-color: red;
  color: white;
  padding: 1em;
}

.content {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.horizontal_slide {
  display: flex;
  overflow-x: auto;
  background-color: lightblue;
  padding: .5em;
}

.horizontal_slide>* {
  width: 1000px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: lightgray;
  padding: .5em;
  display: flex;
}

<header>Fancy header with height adjusting to variable content</header>
<div class="content">
  <article class="card">
    <h1>One of several cards that flips visibility</h1>
    <div class="overflow_x_wrapper">
      <div class="horizontal_slide">
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
      </div>
      <div class="toolbar">Sticky toolbar part-way down the content</div>
      <p>Rest of vertically scrollable container with variable number of child containers and other elements</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  </div>

Answer 4

我做了一个临时的 flexbox 表并遇到了这个问题。为了解决这个问题，我简单地将粘性标题行放在 flexbox 之外，就在它之前。

Answer 5

就我而言，其中一个父容器应用了overflow-x: hidden;，这将破坏position: sticky 的功能。您需要删除该规则。

任何父元素都不应应用上述 CSS 规则。此条件适用于直到（但不包括）“body”元素的所有父级。

Answer 6

由于弹性盒元素默认为stretch，所有元素的高度相同，不能滚动。

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

目前在所有主流浏览器中都是supported，但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>

JSFiddle showing the solution

Answer 7

您也可以尝试将子 div 添加到包含内容的 flex 项目中，并将 position: sticky; top: 0; 分配给它。

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