## Mengapa Item Flex dengan `flex: 1` Melebihi Ketinggian Induknya dalam Firefox, Tetapi Bukan Chrome?

Mencegah Item Flex daripada Melebihi Ketinggian Induk dan Fungsi Bar Skrol dalam Firefox

Dalam Firefox, diperhatikan bahawa item flexbox kanak-kanak dengan flex: 1 dan limpahan- y: tatal mungkin melebihi ketinggian kotak lentur induknya, menyebabkan kandungan melimpah dan bar tatal tidak muncul. Sebaliknya, dalam Chrome, item anak mengisi ruang menegak yang tinggal dengan betul, bar skrol muncul dan ketinggian induk tidak melebihi.

Penyelesaian

Untuk menyelesaikan isu ini, gantikan flex: 1 dengan flex : 1 1 1px untuk item flexbox kanak-kanak. Ini menetapkan asas fleksibel kepada nilai tetap 1px, memastikan limpahan skrol akan berlaku dan bar skrol akan muncul.

Penjelasan

Walaupun amalan biasa menetapkan ketinggian min: 0 dalam kes sedemikian , ia tidak mencukupi dalam senario ini. Fleksi peraturan trengkas: 1 termasuk asas fleksibel: 0, yang dalam Firefox dan Edge tidak mencukupi untuk mencetuskan limpahan.

Menurut MDN:

Agar limpahan mempunyai kesan, bekas aras blok mesti mempunyai sama ada ketinggian yang ditetapkan (tinggi atau ketinggian maks) atau ruang putih yang ditetapkan kepada nowrap.

Untuk memastikan kelakuan piawai dan membolehkan limpahan, tetapkan ketinggian tetap untuk asas lentur, walaupun nilai minimum seperti 1px.

Atas ialah kandungan terperinci ## Mengapa Item Flex dengan `flex: 1` Melebihi Ketinggian Induknya dalam Firefox, Tetapi Bukan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!