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

Menyelesaikan Isu Rendering dengan Flexbox dalam Firefox dan Chrome 48

Pengenalan:
Flexbox, reka letak yang berkuasa sistem, boleh menyebabkan ketidakkonsistenan merentas pelayar. Soalan ini menangani isu pemaparan di mana flexbox berkelakuan berbeza dalam Firefox dan Chrome 48.

Masalah:
Dalam Chrome 47, div dengan kelas .scroll menatal dengan betul, menduduki 100% ketinggian menggunakan flex. Walau bagaimanapun, dalam Firefox, div yang sama menggunakan ketinggian kandungan dan tidak menatal dengan betul.

Penyelesaian:
Perubahan dalam tingkah laku pemaparan adalah disebabkan oleh kemas kini dalam spesifikasi flexbox , yang menetapkan saiz minimum lalai item fleksibel kepada saiz kandungannya. Untuk mengatasi tetapan ini dan memastikan keserasian merentas penyemak imbas, anda boleh menambah peraturan CSS berikut:

.content {
    min-height: 0;
    min-width: 0;
}

Ini akan memaksa div .content, yang mengandungi div .scroll, mempunyai saiz minimum sifar , membenarkannya mengecut agar sesuai dengan ruang yang tersedia.

Chrome yang dikemas kini Gelagat:
Pada mulanya, penyelesaian di atas dijangka berfungsi dalam kedua-dua Firefox dan Chrome 48. Walau bagaimanapun, telah dilaporkan bahawa Chrome 48 telah mengemas kini gelagat pemaparannya dan kini meniru Firefox dari segi saiz fleksibel minimum. Oleh itu, penyelesaian yang disediakan di atas juga harus menyelesaikan isu dalam Chrome 48.

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