Neuer Titel: Mein Punkt ist: Die Sticky-Eigenschaften von Sticky-Elementen bleiben bei Verwendung von Flexbox nicht erhalten

Question

Ich blieb eine Weile bei diesem Problem hängen und wollte dieses position: sticky Problem mit der Flexbox teilen:

Mein Sticky-Div ist nach dem Wechsel zur Flexbox-Containeransicht plötzlich nicht mehr Sticky, wenn es in ein übergeordnetes Flexbox-Element eingeschlossen ist.

.flexbox-wrapper {
  Anzeige: Flex;
  Höhe: 600px;
}
.regulär {
  Hintergrundfarbe: blau;
}
.klebrig {
  Position: -webkit-sticky;
  Position: klebrig;
  oben: 0;
  Hintergrundfarbe: rot;
}

<div class="flexbox-wrapper">
  <div class="regular">
    Dies ist eine gewöhnliche Box
  </div>
  <div class="sticky">
    Das ist eine Klebebox
  </div>
</div>

JSFiddle-Anzeigeproblem

Answer 1

在我的情况下，一个父容器应用了overflow-x: hidden;这个样式，这会破坏position: sticky的功能。你需要移除这个规则。

没有任何父元素应该应用上述的CSS规则。这个条件适用于所有父元素，直到（但不包括）'body'元素。

Answer 2

由于弹性盒子元素默认为stretch，所有元素的高度都相同，无法进行滚动。

将align-self: flex-start添加到粘性元素中，将高度设置为自动，从而实现了滚动并固定。

目前，这在所有主要浏览器中都得到了支持，但Safari仍需要使用-webkit-前缀，而除了Firefox之外的其他浏览器在使用position: sticky的表格时存在一些问题。

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* 不是必需的 -- 仅作为示例 */
}
.regular {
  background-color: blue; /* 不是必需的 -- 仅作为示例 */
  height: 600px;          /* 不是必需的 -- 仅作为示例 */
}
.sticky {
  position: -webkit-sticky; /* 适用于Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- 这是修复的地方 */
  background-color: red;  /* 不是必需的 -- 仅作为示例 */
}

<div class="flexbox-wrapper">
  <div class="regular">
    这是普通的盒子
  </div>
  <div class="sticky">
    这是粘性的盒子
  </div>
</div>