Bagaimana untuk Membuat Kawasan Kandungan Flexbox Tatal Secara Bebas Sambil Membenarkan Elemen Kanak-kanak Melimpah?

Menatal Flexbox dengan Kandungan Melimpah

Masalah:

Pertimbangkan reka letak berikut:

[Imej reka letak]

Apabila kawasan kandungan melimpah, keseluruhan halaman menatal, bukan hanya kawasan kandungan itu sendiri. Menggunakan limpahan: auto pada div kandungan menyelesaikan isu ini, tetapi ia menyebabkan sempadan lajur terputus.

Soalan:

Bagaimanakah kawasan kandungan boleh ditetapkan untuk menatal secara bebas, sambil membenarkan anak-anaknya melangkaui kotak kandungan ketinggian?

Jawapan:

Menurut Tab Atkins, pengarang spec flexbox, pendekatan berikut boleh digunakan:

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    display: flex;
    min-height: min-content;
}

<div class="content">
  <div class="box">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</div>

Dengan menetapkan ketinggian min kepada kandungan min pada div kotak, lajur akan melebihi ketinggian kotak kandungan, sementara masih membenarkan kawasan kandungan menatal secara bebas. Awalan vendor mungkin diperlukan untuk keserasian.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Kawasan Kandungan Flexbox Tatal Secara Bebas Sambil Membenarkan Elemen Kanak-kanak Melimpah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!