Mengapa Anak Lajur Flexbox Saya Tidak Mengisi 100% Ketinggian dalam Chrome?

Ketinggian 100% pada anak lajur flexbox

Isu anda berpunca daripada konflik dalam spesifikasi flexbox, yang mempengaruhi cara peratusan ketinggian dikira dalam Chrome. Mengikut spesifikasi flexbox, apabila align-self ditetapkan kepada regangan (lalai untuk elemen flex), ia melaraskan nilai yang digunakan bagi sifat saiz silang elemen (ketinggian dalam kes ini). Walau bagaimanapun, peratusan beroperasi berdasarkan nilai yang ditentukan bagi sifat bersaiz silang induk, bukan nilai yang digunakan.

Dalam contoh anda, CSS untuk elemen .flex ditetapkan kepada flex: 1, yang bermaksud ia' akan mengambil semua ruang yang ada. Elemen .flex-child mempunyai tetapan ketinggian 100%, yang bermaksud ia akan mengambil 100% ketinggian yang tersedia, dikira berdasarkan ketinggian yang ditentukan oleh induk fleksibel. Walau bagaimanapun, ketinggian untuk .flex tidak ditetapkan secara eksplisit, jadi ia lalai kepada auto. Akibatnya, Chrome mentafsir ketinggian .flex-child sebagai 100% auto, itulah sebabnya ia tidak mengisi keseluruhan elemen .flex.

Untuk menyelesaikan isu ini, anda perlu:

1. Tetapkan .flex untuk dipaparkan: flex; untuk memastikan ia dikenali sebagai bekas fleksibel.
2. Alih keluar ketinggian: 100%; kenyataan daripada .flex-child.

Ini akan membolehkan .flex-child mengisi ketinggian penuh elemen .flex induknya.

Walau bagaimanapun, penyelesaian ini mungkin tidak berfungsi jika anda sedang cuba mengisi hanya sebahagian daripada .flex. Dalam kes sedemikian, anda perlu menggunakan penyelesaian seperti menambah anak .spacer kedua kepada .flex dengan flex: 1 dan menetapkan .flex-child kepada flex: 9. Walaupun ini adalah pilihan yang kurang elegan, ia adalah penyelesaian untuk ditangani keanehan spesifikasi.

Perlu diperhatikan bahawa isu ini khusus untuk Chrome dan mungkin tidak berlaku dalam penyemak imbas lain. Diharapkan kemas kini masa hadapan pada spesifikasi flexbox akan menangani ketidakkonsistenan ini dan meningkatkan keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Mengapa Anak Lajur Flexbox Saya Tidak Mengisi 100% Ketinggian dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!