Bekas tidak menambah lebarnya apabila item Flexbox dibalut dalam mod lajur

Question

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

Answer 1

Lewat ke parti tetapi masih mengalami masalah ini bertahun-tahun kemudian. Akhirnya menemui penyelesaian menggunakan grid. Pada bekas boleh guna

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

Saya ada contoh pada CodePen untuk menukar antara isu Flexbox dan pembetulan jaringan: https://codepen .io/MandeeD/pen/JVLdLd

Answer 2

Soalan

Ini kelihatan seperti kecacatan asas dalam reka letak fleksibel.

Bekas fleksibel berorientasikan lajur tidak mengembang untuk menampung lajur tambahan. (Ini bukan masalah dalam flex-direction: row.)

Soalan ini telah ditanya berkali-kali (lihat senarai di bawah) dan tiada jawapan yang jelas dalam CSS.

Sukar untuk menentukan ini sebagai pepijat kerana masalah berlaku dalam semua pelayar utama. Tetapi ia menimbulkan persoalan:

Anda fikir sekurang-kurangnya salah seorang daripada mereka akan melakukannya dengan betul. Saya hanya boleh membuat spekulasi mengapa. Mungkin ini adalah pelaksanaan teknikal yang sukar dan oleh itu ditangguhkan untuk lelaran ini.

Kemas kini: Isu ini nampaknya telah diselesaikan dalam Edge v16.

---

Penerangan masalah

OP mencipta demo yang berguna untuk menggambarkan masalah. Saya menyalinnya di sini: http://jsfiddle.net/nwccdwLw/1/ p>

---

Pilihan Penyelesaian

Penyelesaian hacky daripada komuniti Stack Overflow:

• "Nampaknya masalah ini tidak boleh diselesaikan dengan CSS sahaja, jadi saya mengesyorkan anda menggunakan penyelesaian JQuery."

• "Anehnya, kebanyakan penyemak imbas tidak melaksanakan bekas lentur lajur dengan betul, tetapi sokongan untuk mod tulis cukup bagus. Jadi anda boleh menggunakan bekas lentur baris dalam mod tulisan menegak

Lagi analisis

---

• Laporan Pepijat Chromium

• Jawapan Mark Emery

---

Siaran lain yang menerangkan isu yang sama

• Lebar bekas kotak fleksibel tidak akan membesar
• Bagaimana untuk membuat paparan:bekas fleksibel mengembang mendatar dengan kandungannya yang dibalut?
• Aliran lentur: Pembalut lajur. Bagaimana untuk menetapkan lebar bekas sama dengan kandungan?
• Ralat pembalut lajur aliran Flexbox Flex dalam Chrome?
• Bagaimana untuk menggunakan "flex-flow: column wrap"?
• Bekas Flex tidak akan mengembang apabila kandungan dibalut ke dalam lajur
• flex-flow: Pembalut lajur, menyebabkan bekas induk melimpah dalam flexbox
• Html Bekas Flexbox tidak mengembang pada kanak-kanak yang dibalut
• Bekas Flexbox dan anak-anak Flex yang melimpah?
• Bagaimana cara membuat bekas Flexbox yang membentang untuk memuatkan barang yang dibalut?
• Apabila terdapat berbilang lajur, bekas Flex mengira satu lajur
• Gunakan Flex untuk menjadikan bekas itu lebar penuh
• Bolehkah bekas Flexbox diubah saiz?
• Flex-Wrap terbina dalam Flex-Grow
• Flexbox dimasukkan secara beransur-ansur
• Kembangkan elemen flexbox kepada kandungannya?
• Lajur Flexbox diregangkan agar sesuai dengan kandungan
• https://stackoverflow.com/q/48406237/3597276
• flex-flow: Balutan lajur tidak meregangkan lebar elemen induk
• Mengapa
  saya tidak mengembang lebar untuk meliputi semua
  • ?
• https://stackoverflow.com/q/55709208/3597276
• Balut garisan Flexbox tidak akan menambah lebar induk?
• Bekas Flex Mutlak tidak ditukar kepada lebar yang betul menentukan ketinggian maksimum
• Div blok sebaris induk adalah lebih sempit daripada div anak dengan flex-wrap