為什麼我的黏性元素在 Flexbox 容器中不起作用？

Flexbox 陷阱：Position: Sticky 元素行為無法預測

開發人員在Flexbox 容器中使用position: Sticky 時常會遇到意外行為。預設情況下，flexbox 元素會拉伸以填充可用空間，從而導致所有元素的高度相等，這會阻止滾動並使黏性元素變得不起作用。

解決方案在於修改黏性元素的align-self 屬性到 flex-start，將其高度重設為 auto。這可以實現滾動並允許黏性元素黏附到其預期位置。

範例：

在以下程式碼中，黏性元素在對齊之前無法正常運作 - self: 新增了flex-start:

<div>
<pre class="brush:php;toolbar:false">.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;
}
.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: red;
}

瀏覽器支援：

• align-selfflex：所有主要瀏覽器都支援flex- start，除了Safari，它需要-webkit- 前綴：

  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }

透過實施此修復，開發人員可以確保 position: Sticky 元素在 Flexbox 容器中按預期運行。