Mengapa Elemen Flexbox Saya Tatal Berbeza dalam Firefox dan Chrome, dan Bagaimana Saya Boleh Membetulkannya?

Masalah Rendering Penyemak Imbas dengan Flexbox dalam Firefox dan Chrome

Dalam Firefox dan Chrome 48, pemaparan flexbox berbeza, membawa kepada masalah dengan kandungan menatal. Dalam Chrome 47, elemen dengan kelas .scroll tatal dengan betul dan menduduki 100% ketinggian bekasnya. Walau bagaimanapun, dalam Firefox, elemen ini mematuhi ketinggian kandungannya dan tidak menatal secukupnya.

Penyelesaian

Isu silang pelayar ini berpunca daripada kemas kini kepada spesifikasi flexbox yang menetapkan saiz minimum lalai item fleksibel kepada saiz kandungannya (lebar min: auto / ketinggian min: auto). Untuk membetulkan ini, anda boleh mengatasi tetapan ini dengan CSS berikut:

.content {
    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

Dengan menetapkan kedua-dua ketinggian min dan lebar min kepada 0, anda memaksa elemen untuk mengecilkan membalut kandungannya, membolehkannya tatal dalam bekasnya dengan betul.

Perkembangan Terkini

Memang berbaloi dengan menyatakan bahawa Chrome 48 telah mengemas kini gelagat pemaparannya untuk mencontohi Firefox. Akibatnya, penyelesaian yang disediakan di atas kini seharusnya berfungsi dalam kedua-dua Firefox dan Chrome 48.

Atas ialah kandungan terperinci Mengapa Elemen Flexbox Saya Tatal Berbeza dalam Firefox dan Chrome, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!