Mengapa `overflow-y` Tidak Berfungsi dalam Firefox dengan Nested Flexbox?

Limpahan-y Tidak Berfungsi dalam Firefox dengan Nested Flexbox

Ramai pembangun web sudah biasa dengan isu di mana overflow-y tidak berfungsi dengan betul dalam Firefox apabila digunakan dengan susun atur flexbox bersarang. Ini boleh menjadi masalah yang mengecewakan untuk diselesaikan, terutamanya bagi mereka yang tidak biasa dengan selok-belok CSS3.

Masalahnya berpunca daripada cara Firefox mengira saiz minimum item fleksibel. Secara lalai, item flex bersaiz berdasarkan saiz intrinsik anak-anak mereka. Walau bagaimanapun, apabila elemen di dalam item flex mempunyai limpahan-y digunakan padanya, Firefox tidak mengambil kira perkara ini apabila mengira saiz minimum. Akibatnya, item flex tidak boleh mengecil di bawah saiz elemen anaknya, walaupun elemen kanak-kanak mempunyai kandungan boleh tatal.

Untuk menyelesaikan isu ini, adalah perlu untuk melumpuhkan tingkah laku saiz minimum lalai untuk item flex . Ini boleh dilakukan dengan menambahkan sifat min-height:0 pada item flex induk. Sebagai contoh, dalam contoh kod yang disediakan, peraturan CSS berikut harus ditambahkan pada kelas .level-0-row2:

<code class="css">.level-0-row2 {
  min-height: 0;
}</code>

Setelah peraturan ini ditambahkan, Firefox akan mengira saiz minimum dengan betul item flex dan sifat limpahan-y akan berfungsi seperti yang diharapkan.

Dengan memahami punca masalah ini dan melaksanakan pembetulan CSS yang sesuai, pembangun web boleh memastikan bahawa reka letak flexbox bersarang mereka berfungsi dengan betul dalam Firefox dan moden yang lain pelayar.

Atas ialah kandungan terperinci Mengapa `overflow-y` Tidak Berfungsi dalam Firefox dengan Nested Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!