Mengapa `ketinggian: 100%` tidak berfungsi pada Kanak-kanak Lajur Flexbox dalam Chrome?

Ketinggian 100% Tidak Berfungsi pada Anak Lajur Flexbox: Pepijat Khusus Penyemak Imbas

Anda menghadapi isu di mana elemen anak dalam lajur flexbox tidak bertindak balas terhadap peratusan ketinggian. Masalah ini telah dikenal pasti dalam Chrome dan mungkin tidak menjejaskan penyemak imbas lain.

Dalam sampel kod anda:

• .flexbox ditetapkan untuk dipaparkan sebagai bekas flexbox dengan arah lajur.
• .flex ialah elemen lentur.
• .flex-child ialah elemen child dalam .flex.

Apabila menetapkan .flex-child ke ketinggian: 100 %, ia gagal mengisi ruang menegak induknya, .flex.

Penyelesaian:

Untuk menyelesaikan isu ini, buat pengubahsuaian berikut:

• Tukar .flex untuk dipaparkan sebagai flexbox: .flex { paparan: flex; }.
• Alih keluar ketinggian: 100% gaya daripada .flex-child.

Perubahan ini akan membolehkan elemen .flex-child mengisi ruang menegak yang tersedia dalam .flex.

Penjelasan:

Spesifikasi flexbox menyatakan bahawa align-self: stretch (lalai untuk elemen lentur) hanya mempengaruhi nilai yang digunakan bagi sifat saiz silang elemen ( ketinggian dalam kes ini). Walau bagaimanapun, peratusan dikira berdasarkan nilai yang ditentukan bagi sifat saiz silang induk, bukan nilai yang digunakan.

Memandangkan tiada ketinggian ditentukan untuk .flex, ketinggian lalai ialah "auto". Apabila anda menetapkan .flex-child kepada ketinggian: 100%, Chrome mengira ketinggian berdasarkan nilai .flex yang ditentukan, iaitu "auto." Oleh itu, .flex-child akhirnya mempunyai ketinggian 0 kerana "auto" bermaksud "sebesar yang diperlukan."

Dengan menukar .flex kepada dipaparkan sebagai flexbox, anda secara eksplisit menetapkan arah flexnya kepada baris . Ini membolehkan .flex-child mengisi ketinggian .flex dengan betul seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapa `ketinggian: 100%` tidak berfungsi pada Kanak-kanak Lajur Flexbox dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!