IE11 ではレイアウト計算に絶対配置のフレックス項目が含まれるのはなぜですか?

IE11 のフローで考慮される絶対配置された Flex アイテム

問題

コンテンツが埋め込まれた 2 つの div と 1 つの絶対配置された背景 div を持つフレックスボックス コンテナー内, IE11 (およびバージョン 52 より前の Firefox) は、スペース配分を計算するときに絶対位置の div を考慮します。この動作は、絶対配置されたアイテムはフレックス レイアウトに参加しないというフレックスボックスの仕様から逸脱しています。

回避策

絶対配置された Div を再配置します

考えられる解決策は、図に示すように、絶対に配置された div を他の 2 つの div の間に移動することです。以下:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

フレックス ラップを使用する

もう 1 つの回避策は、フレックス ラップを使用して、絶対位置にある項目を強制的に新しい行に折り返すことです。これにより、他の項目のスペース配分に影響が及ばなくなります:

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

Firefox の場合 (v52 まで): デフォルトの動作を上書きします

Firefox の場合 (以前のバージョン) 52) では、この CSS プロパティを使用してデフォルトの動作をオーバーライドし、絶対位置の div をフロー:

.container {
    display: -moz-box;  /* Firefox specific property */
    -moz-box-orient: horizontal;  /* Firefox specific property */
}

以上がIE11 ではレイアウト計算に絶対配置のフレックス項目が含まれるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。