新標題：我的觀點是：當使用flexbox時，黏性元素的黏性特性不會被保留

Question

我在這個問題上卡了一會兒，想分享這個 position: sticky flexbox 的問題：

我的黏性div在切換到flexbox容器視圖後，突然在被包裹在flexbox父元素中時不再黏性。

.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">
    這是一個普通的盒子
  </div>
  <div class="sticky">
    這是一個黏性的盒子
  </div>
</div>

JSFiddle顯示問題

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>