Firefox と Chrome で Flexbox 要素のスクロールが異なるのはなぜですか? それを修正するにはどうすればよいですか?

Firefox と Chrome の Flexbox でのクロスブラウザ レンダリングの問題

Firefox と Chrome 48 では、Flexbox レンダリングが異なり、次の問題が発生します。スクロールするコンテンツ。 Chrome 47 では、.scroll クラスの要素は正しくスクロールし、コンテナの高さの 100% を占めます。ただし、Firefox では、これらの要素はコンテンツの高さに準拠し、適切にスクロールしません。

解決策

このクロスブラウザの問題は、フレックスボックス仕様の更新に起因します。これは、フレックス項目のデフォルトの最小サイズをそのコンテンツのサイズに設定します (min-width: auto / min-height: auto)。これを修正するには、次の CSS でこの設定をオーバーライドします。

.content {
    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

min-height と min-width の両方を 0 に設定すると、要素のコンテンツが強制的にシュリンクラップされ、要素がコンテナ内を正しくスクロールしてください。

最近の開発

Chrome が次の点に注意してください。 48 はそれ以来、Firefox のレンダリング動作をエミュレートするようにレンダリング動作を更新しました。その結果、上記のソリューションは Firefox と Chrome 48 の両方で動作するようになりました。

以上がFirefox と Chrome で Flexbox 要素のスクロールが異なるのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。