Internet Explorer 10 および 11 で Flex コンテナの「min-height」が無視されるのはなぜですか?

Internet Explorer で見落とされるフレックス コンテナの最小高さ

標準化されたフレックスボックス プロパティが広くサポートされているにもかかわらず、Internet Explorer 10 および 11 は、次の場合に特有の動作を示します。それはフレックスコンテナになります。このような問題の 1 つは、min-height プロパティが無視されることで発生します。

それぞれの最大高さが 400px の 2 つの子 div を含むコンテナ div を考えてみましょう。 CSS flex プロパティを利用して、justify-content: space-between;子 div 間の垂直方向のスペースを均等に分配することを目的としています。ただし、この調整は Chrome と Firefox では問題なく機能しますが、Internet Explorer では機能しません。

解決策は、フレックス コンテナ自体をフレックス アイテムとして設定することにあります。 display: flex; を追加するだけで済みます。および flex-direction: 列; Internet Explorer 10 および 11 では、body 要素に対してコンテナーの min-height プロパティが尊重されます。これにより、子 div 間の適切なスペース配分が確保されます。

この回避策は、Internet Explorer バージョン 10 および 11 に特有のフレックスボックスのバグに対処します。 、最新のブラウザ間で一貫した動作を保証します。この問題の詳細については、https://github.com/philipwalton/flexbugs#flexbug-3 を参照してください。

以上がInternet Explorer 10 および 11 で Flex コンテナの「min-height」が無視されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。