Sticky 要素が Flexbox コンテナに貼り付かなくなるのはなぜですか?

フレックスボックスの使用時にスティッキー要素がスタックする

フレックスボックス コンテナ内に配置するとスティッキー要素のスティッキー性が失われるという問題が発生しました。 。この問題は、フレックスボックス要素が本質的に利用可能なスペースを埋めるために引き伸ばされるため、すべての要素が同じ高さを共有し、垂直スクロールが妨げられるために発生します。

修正: 配置の調整

解決するにはこれは、スティッキー要素に「align-self: flex-start」を追加します。これにより、要素の高さが固定ではなく自動になり、ページが期待どおりにスクロールできるようになります。

ブラウザの互換性

ほとんどのブラウザはこの修正をサポートしていますが、Safari では「-webkit-」はスティッキー配置の接頭辞です。さらに、Firefox を除く一部のブラウザでは、固定配置によりテーブルに問題が発生する可能性があります。

更新コード:

.flexbox-wrapper {
  display: flex;
  overflow: auto;
}

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

以上がSticky 要素が Flexbox コンテナに貼り付かなくなるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。