Mengapa Anak Flex Saya Melebihi Ketinggian Ibu Bapa dalam Firefox tetapi Bukan Chrome?

Mencegah Item Flex Kanak-kanak daripada Melebihi Ketinggian Ibu Bapa

Apabila bekas flex mengandungi item kanak-kanak dengan kedua-dua lentur: 1 dan limpahan-y: tatal, percanggahan antara Chrome dan Firefox timbul. Dalam Chrome, item anak mengembang untuk mengisi ruang yang tinggal tanpa melebihi ketinggian ibu bapa, menyebabkan bar skrol kelihatan. Dalam Firefox, walau bagaimanapun, ketinggian item kanak-kanak meningkat, keluar daripada induk.

Penyelesaian

Untuk menyelesaikan isu ini dalam Firefox, gantikan flex: 1 dengan flex: 1 1 1px. Ini menetapkan asas minimum tetap 1px, memastikan item anak tidak melebihi ketinggian ibu bapa walaupun terdapat limpahan kandungan.

Kod Disemak

<code class="css">#messagelist {
  flex: 1 1 1px;
}

#messagecontents {
  flex: 1 1 1px;
}</code>

Pengubahsuaian ini memastikan bahawa item kanak-kanak mengembang untuk memenuhi ruang yang tersedia sambil kekal terkandung dalam bekas fleksibel. Bar skrol akan muncul dalam Chrome dan Firefox, membolehkan pengguna melihat kandungan di luar kawasan yang boleh dilihat.

Atas ialah kandungan terperinci Mengapa Anak Flex Saya Melebihi Ketinggian Ibu Bapa dalam Firefox tetapi Bukan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!