Mengapakah `ketinggian min` Bekas Flexbox Saya Diabaikan dalam Internet Explorer?

Flexbox: Min-Height Diabaikan dalam Internet Explorer

Apabila cuba melaksanakan bekas flex menggunakan istilah flexbox standard dalam Internet Explorer (IE) versi 10 dan 11, pengguna mungkin menghadapi masalah apabila sifat ketinggian min yang ditentukan diabaikan. Ini boleh membawa kepada tingkah laku yang tidak dijangka, kerana ketinggian bekas tidak terhad kepada nilai minimum.

Masalah:

Bekas fleksibel dengan dua div kanak-kanak mempamerkan tingkah laku ketinggian yang tidak dijangka dalam IE. Div kanak-kanak mempunyai ketinggian kurang daripada 400px, tetapi sifat ketinggian min kontena 400px diabaikan, menyebabkan bekas yang tidak berkembang untuk menampung justify-content: space-between property. Ini menghalang div anak pertama daripada menjajarkan ke atas dan div anak kedua daripada menjajarkan ke bawah.

Penyelesaian:

Untuk menyelesaikan isu ini dalam IE 10 dan 11, adalah perlu untuk menjadikan bekas flex itu sendiri sebagai item flex. Ini boleh dicapai dengan menambahkan CSS berikut pada kod:

body {
  display: flex;
  flex-direction: column;
}

Dengan menetapkan elemen badan sebagai item flex, div bekas mewarisi sifat flexbox dan menghormati sifat ketinggian min dengan betul.

Contoh Disemak:

Kod yang dikemas kini dengan pembetulan item flex tersedia dalam biola yang disemak:

<div>

Atas ialah kandungan terperinci Mengapakah `ketinggian min` Bekas Flexbox Saya Diabaikan dalam Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!