私のスティッキー要素がフレックスボックスで機能しないのはなぜですか?

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

スクロール中に指定された位置に固定されたままの要素に使用されるスティッキー配置が予期せぬ動作をするフレックスボックスコンテナで使用する場合。この問題は、フレックスボックス要素がデフォルトで伸縮する場合に発生し、その結果、スクロールできない要素の高さが一定になります。

この問題を解決するには、スティッキー要素に align-self: flex-start を追加します。この属性は要素の高さを auto に設定し、スクロールして位置の問題を解決できるようにします。

ブラウザーによるposition: Sticky Tableのサポートはさまざまであることに注意してください。 Safari には -webkit- プレフィックスが必要ですが、Firefox では現在問題が発生しています。

参考のために調整されたコード スニペットを次に示します。

.flexbox-wrapper {<br> display: flex; <br> オーバーフロー: 自動;<br> 高さ: 200px;          /<em> 必要ありません -- たとえば、</em>/<br>}<br>.normal {<br> 背景色: 青; のみです。 /<em> 不要 -- たとえば </em>/<br> のみ 高さ: 600px;          /<em> 必要ありません。たとえば、</em>/<br>}<br>.sticky {<br> 位置: -webkit-sticky; のみです。 /<em> Safari の場合 </em>/<br> 位置: スティッキー;<br> トップ: 0;<br> align-self: flex-start; /<em> <-- これは修正です </em>/<br> 背景色: 赤;  /<em> 不要 -- たとえば、</em>/<br>}<br>

のみ

以上が私のスティッキー要素がフレックスボックスで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。