Bagaimana untuk Menghalang Item Flex daripada Melebihi Ketinggian Induk dan Mendayakan Fungsi Bar Skrol dalam Firefox?

Cegah Item Flex daripada Melebihi Ketinggian Induk dan Dayakan Fungsi Bar Tatal dalam Firefox

Firefox berkelakuan berbeza daripada Chrome apabila ia berkaitan dengan kotak fleksibel tertentu senario, menyebabkan ketinggian div kanak-kanak melebihi ketinggian ibu bapa. Isu ini timbul apabila anak div dengan bar skrol dan flex:1 cuba melebihi ketinggian bekas flexbox induknya.

Jawapan Ringkas

Untuk menyelesaikan isu ini, gunakan flex: 1 1 1px dan bukannya flex: 1 untuk div kanak-kanak dengan limpahan-y: tatal. Perubahan dalam peraturan CSS ini memastikan bahawa asas fleksibel div kanak-kanak ditetapkan pada ketinggian tetap, menyelesaikan masalah dalam Firefox.

Penjelasan

Selalunya, menambah min -tinggi: 0 untuk melenturkan item dalam bekas arah lajur menyelesaikan masalah. Walau bagaimanapun, dalam kes ini, cabarannya terletak pada asas flex.

Peraturan fleksibel: 1 trengkas terbahagi kepada tiga bahagian: flex-grow: 1, flex-shrink: 1 dan flex-basis: 0 . Secara lalai, flex-basis ditetapkan kepada 0, yang tidak mencukupi untuk mencetuskan keadaan limpahan dalam penyemak imbas Firefox dan Edge.

Untuk mematuhi piawaian, berikan ketinggian tetap kepada asas-flex (walaupun ia hanya 1px). Melakukannya membolehkan limpahan berlaku, menjana bar skrol dan menghalang div kanak-kanak daripada melebihi ketinggian ibu bapa.

Berikut ialah pelarasan kod:

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

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

Mengguna pakai penyelesaian ini akan membantu anda mengatasi masalah percanggahan ketinggian antara div flexbox ibu bapa dan anak dalam Firefox, memastikan tingkah laku yang konsisten merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Item Flex daripada Melebihi Ketinggian Induk dan Mendayakan Fungsi Bar Skrol dalam Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!