Mengapa Div Skrol Flexbox Saya Membuatkan Berbeza dalam Firefox dan Chrome, dan Bagaimana Saya Boleh Membetulkannya?

Isu Rendering Penyemak Imbas dengan Flexbox dalam Firefox dan Chrome

Model susun atur flexbox menyediakan cara yang intuitif dan cekap untuk mengendalikan kedudukan elemen dan saiz. Walau bagaimanapun, ketidakkonsistenan dalam tingkah laku pemaparan merentas penyemak imbas boleh timbul.

Masalah: Penatalan Tidak Betul dalam .Scroll Div

Dalam versi Chrome (47) yang terdahulu, elemen dengan . kelas tatal ditatal dengan betul menggunakan flex, mengambil ketinggian 100%. Walau bagaimanapun, dalam Firefox, kelas yang sama menyebabkan div hanya menggunakan ketinggian kandungan, mengakibatkan kelakuan menatal yang salah.

Penyelesaian Silang Penyemak Imbas

Untuk menyelesaikan isu ini , saiz minimum lalai item flex mesti ditindih. Dengan menetapkan lebar min dan ketinggian min kepada 0, div .scroll boleh mengecut agar sesuai dengan kandungannya sambil mengekalkan bar skrol:

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

Gelagat Perenderan Dikemas kini dalam Chrome 48

Adalah penting untuk ambil perhatian bahawa Chrome 48 telah menggunakan gelagat pemaparan yang serupa dengan Firefox. Akibatnya, penyelesaian yang disediakan di atas kini seharusnya berfungsi secara konsisten merentas kedua-dua penyemak imbas.

Maklumat Tambahan

Perubahan dalam Chrome 48 telah dilaksanakan untuk sejajar dengan spesifikasi flexbox terkini, yang lalai min-lebar dan min-tinggi kepada auto. Ini membolehkan saiz minimum yang lebih munasabah untuk item fleksibel.

Untuk butiran lanjut, rujuk spesifikasi dan laporan pepijat yang dipautkan dalam jawapan yang dirujuk.

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