为什么我的粘性元素在 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-self：所有主要浏览器都支持 flex-start，除了 Safari，它需要 -webkit- 前缀：

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

通过实施此修复，开发人员可以确保 position: Sticky 元素在 Flexbox 容器中按预期运行。