cari

Rumah  >  Soal Jawab  >  teks badan

Bekas tidak menambah lebarnya apabila item Flexbox dibalut dalam mod lajur

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

P粉924915787P粉924915787405 hari yang lalu576

membalas semua(2)saya akan balas

  • P粉221046425

    P粉2210464252023-10-18 18:31:39

    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

    balas
    0
  • P粉011912640

    P粉0119126402023-10-18 09:45:49

    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/

    Pilihan Penyelesaian

    Penyelesaian hacky daripada komuniti Stack Overflow:

    Lagi analisis

    • Laporan Pepijat Chromium

    • Jawapan Mark Emery

    Siaran lain yang menerangkan isu yang sama

  • Batalbalas