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

Question

我被困在这一点上,并认为我会分享这个position: sticky+弹性盒子的问题:

我的粘性div工作正常,直到我将视图切换到弹性盒容器,并且当它被包装在弹性盒父中时突然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显示问题

Answer 1

由于弹性框元素默认为stretch,所有元素都是相同的高度,无法滚动.

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

目前仅在Safari和Edge中支持此功能

.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;
  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展示了解决方案

Answer 2

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

任何父元素都不应应用上述 CSS 规则。此条件适用于（但不包括）'body' 元素之前的所有父元素。

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

• header 可以动态调整高度，这可以防止播放position: absolute或position: fixed
• 内容垂直滚动，水平限制为视图宽度
• 粘性元素可以在垂直方向的任何地方，粘在标题的底部
• 其他元素可以水平滑动
  • 看起来 SO 片段工具无法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 6

确保flex-wrapper已指定高度，并将溢出值设置为auto。然后添加“align-self：flex-start;” 到粘性元素。

.flexbox-wrapper {
  display: flex;
  height: 600px;  //<- nessary,and don't assign with %
  overflow:auto;  //<-fix
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
  align-self: flex-start; // <-fix
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>