Saya sedang membangunkan susun atur Flexbox bersarang yang berfungsi seperti ini:

Tahap paling luar (ul#main) ialah senarai mendatar yang mesti berkembang ke kanan apabila lebih banyak item ditambah. Jika ia menjadi terlalu besar, harus ada bar skrol mendatar.

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

Setiap item dalam senarai ini (ul#main > li) 都有一个标头 (ul#main > li > h2) 和一个内部列表 (ul#main > li > ul.tasks). Senarai dalaman ini adalah menegak dan harus dibalut ke dalam lajur apabila diperlukan. Apabila ia membungkus lebih banyak lajur, lebarnya harus meningkat untuk memberi ruang kepada lebih banyak item. Peningkatan lebar ini juga harus digunakan pada item yang mengandungi senarai luar.

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

Masalah saya ialah apabila ketinggian tingkap terlalu kecil, senarai dalam tidak membalut. Saya cuba banyak mengubah semua sifat Flex, cuba mengikuti garis panduan CSS-Tricks dengan ketat, tetapi tidak berjaya.

JSFiddle ini menunjukkan apa yang saya ada setakat ini.

Hasil yang dijangkakan (Apa yang saya mahu):

Hasil sebenar (apa yang saya dapat):

Keputusan yang lebih lama (keputusan yang saya dapat pada 2015):

Kemas kini

Selepas beberapa siasatan, ini mula kelihatan seperti masalah yang lebih besar. Semua pelayar utama berkelakuan dengan cara yang sama, ini tiada kaitan dengan reka bentuk Flexbox bersarang saya. Malah susun atur lajur Flexbox yang lebih ringkas tidak menambah lebar senarai sebagai item yang dibalut.

Satu lagi JSFiddle jelas menunjukkan masalah itu. Dalam versi semasa Chrome, Firefox dan IE11, semua item dibalut dengan betul; row 模式下列表的高度会增加，但在 column 模式下其宽度不会增加。另外，当更改 column 模式的高度时，根本不会立即回流元素，但在 row

Namun, spesifikasi rasmi

(lihat contoh 5 untuk butiran) nampaknya menunjukkan bahawa apa yang saya mahu lakukan sepatutnya boleh dilakukan.

Bolehkah sesiapa mencari penyelesaian untuk masalah ini?

Kemas kini 2

Selepas banyak mencuba menggunakan JavaScript untuk mengemas kini ketinggian dan lebar pelbagai elemen semasa acara mengubah saiz, saya telah membuat kesimpulan bahawa cuba menyelesaikannya dengan cara ini adalah terlalu rumit dan menyusahkan. Selain itu, menambah JavaScript pasti akan memecahkan model Flexbox, yang harus disimpan sebersih mungkin.

Sekarang, saya kembali ke

supaya bekas dalam menatal secara menegak jika diperlukan. Ia tidak cantik, tetapi ia adalah pendekatan yang sekurang-kurangnya tidak merosakkan kebolehgunaan terlalu banyak. overflow-y: auto 而不是 flex-wrap:wrapper

display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);