Firefox と Chrome 48 でフレックスボックスのスクロールが異なるのはなぜですか? それを修正するにはどうすればよいですか?

Firefox および Chrome での Flexbox のレンダリングの問題の修正 48

はじめに:
Flexbox、強力なレイアウトシステムに問題があるため、ブラウザ間で不整合が発生する可能性があります。この質問は、Firefox と Chrome 48 でフレックスボックスの動作が異なるレンダリングの問題に取り組みます。

問題:
Chrome 47 では、.scroll クラスの div は適切にスクロールし、100% を占有しますフレックスを使用した高さ。ただし、Firefox では、同じ div がコンテンツの高さを使用し、正しくスクロールしません。

解決策:
レンダリング動作の変更は、フレックスボックス仕様の更新によるものです。 、フレックス項目のデフォルトの最小サイズをそのコンテンツのサイズに設定します。この設定をオーバーライドしてブラウザ間の互換性を確保するには、次の CSS ルールを追加できます:

.content {
    min-height: 0;
    min-width: 0;
}

これにより、.scroll div を含む .content div の最小サイズがゼロになります。

更新された Chrome の動作:
当初、上記のソリューションは Firefox と Chrome 48 の両方で動作すると予想されていました。 Chrome 48 がレンダリング動作を更新し、最小フレックス サイズに関して Firefox をエミュレートするようになったと報告されています。したがって、上記の解決策によって Chrome 48 の問題も解決されるはずです。

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