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

スティッキー要素とフレックスボックス: 落とし穴

特定の CSS 構成は、予期しない動作を引き起こす可能性があります。このようなシナリオの 1 つは、position: Sticky と flexbox を組み合わせたときに発生します。最初、スティッキー要素は指定されたスクロール位置に到達するまで停滞したままですが、フレックスボックス コンテナー内に配置されるとこの動作は停止します。

問題

この問題は、デフォルトのフレックスボックスの動作。デフォルトでは、フレックスボックスコンテナ内のすべての要素は、利用可能なスペースに合わせて伸縮します。その結果、フレックスボックス コンテナがスクロールを妨げるため、スティッキー要素は本来の機能を失います。

解決策

この問題を解決するには、align-self: flex-start を追加します。プロパティをスティッキー要素に追加します。これにより、スティッキー要素の高さが自動に設定され、コンテンツが自然に流れるようになり、スクロールが可能になります。

ブラウザの互換性

Safari 以外のほとんどの主要なブラウザがこのソリューションをサポートしています。 -webkit- プレフィックスの使用が必要です:

.flexbox-wrapper {
  display: flex;
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* fix */
}

一方、Firefox は align-self をサポートしていません。 flex-start プロパティを使用すると、position: Sticky と同じスクロールの問題が発生しません。さらに、position: Sticky は、すべてのブラウザのテーブルに対してまだ完全にはサポートされていません。特に特定のブラウザ要件に対応する場合は、注意することをお勧めします。

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