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 showing the problem

Answer 1

由于弹性框元素默认为stretch，因此所有元素都具有相同的高度，无法滚动。

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

目前这只是Safari和Edge中的supported

.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 showing the solution

Answer 2

对于我来说，其中一个父容器已应用INSERT，这将破坏overflow-x: hidden;的功能。您需要删除该规则。

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

Answer 3

您还可以尝试将一个子div添加到具有内部内容的flex项目中，并为其分配position: sticky; top: 0;。

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

Answer 4

如果您在父元素中使用 flex，请将 align-self: flex-start 用于您要使其具有粘性的元素。

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

Answer 5

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

Answer 6

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

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

页眉可以动态调整高度，这可以防止玩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 7

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

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

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

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

7 个答案: