Flexbox öğeleri sütun modunda sarıldığında, kapsayıcı genişliğini büyütmez

şu şekilde çalışması gereken iç içe geçmiş bir flexbox düzeni üzerinde çalışıyorum:

en dıştaki seviye ( ul#main ), daha fazla öğe eklendiğinde sağa genişlemesi gereken yatay bir listedir. Çok büyük büyürse, yatay bir kaydırma çubuğu olmalıdır.

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

bu listenin her bir öğesi ( ul#main > li ) bir başlığa ( ul#main > li > h2 ) ve bir iç listeye ( ul#main > li > ul.tasks ) sahiptir. Bu iç liste dikey ve içine sarın gerekir gerektiğinde sütunlar. Daha fazla sütuna sarıldığında, genişliği daha fazla öğe için yer açmak için artmalıdır. Bu genişlik artışı, dış listenin içeren öğesine de uygulanmalıdır.

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

benim sorunum, pencerenin yüksekliği çok küçük olduğunda iç listelerin sarılmamasıdır. CSS-Tricks yönergelerini titizlikle takip etmeye çalışan tüm flex özellikleriyle çok fazla kurcalama denedim, ancak şans yok.

bu JSFiddle şimdiye kadar sahip olduğum şeyi gösteriyor.

beklenen sonuç (ne istiyorum) :

My desired output

gerçek sonuç (ne alabilirim) :

My current output

daha eski sonuç (2015 yılında ne var) :

My older output

güncelleme

bazı soruşturmadan sonra, bu daha büyük bir sorun gibi görünmeye başlıyor. tüm büyük tarayıcılar ile aynı şekilde davranırlar ve flexbox tasarımımın iç içe geçmiş olması ile hiçbir ilgisi yoktur. Daha basit flexbox sütun düzenleri, öğeler sarıldığında listenin genişliğini artırmayı reddeder.

bu diğer jsfiddle açıkça sorunu gösterir. Chrome, Firefox ve IE11'İN mevcut sürümlerinde, tüm öğeler doğru şekilde sarılır; listenin yüksekliği row modunda artar, ancak genişliği column modunda artmaz. Ayrıca, column modunun yüksekliğini değiştirirken elemanların derhal yeniden akması yoktur, ancak row modunda yoktur.

ancak, resmi özellikleri (özellikle 5 örneğine bakın) yapmak istediğim şeyin mümkün olması gerektiğini gösteriyor gibi görünüyor.

birisi bu soruna geçici bir çözüm bulabilir mi?

güncelleme 2

yeniden boyutlandırma olayları sırasında çeşitli elemanların yüksekliğini ve genişliğini güncellemek için JavaScript kullanarak deney yaptıktan sonra, bunu çözmeye çalışmak için çok karmaşık ve çok fazla sorun olduğu sonucuna vardım bu taraftan. Ayrıca, JavaScript eklemek kesinlikle mümkün olduğunca temiz tutulması gereken flexbox modelini kırar.

şimdilik, overflow-y: auto yerine flex-wrap: wrap e geri düşüyorum, böylece iç konteyner gerektiğinde dikey olarak kayar. Güzel değil, ama en azından bizi çok fazla kırmamanın bir yolu.

101
tarihinde sordu Anders Tornblad 2015-11-24 13:55:00
kaynak

3 ответов

Sorun

bu, flex düzeninde temel bir eksikliğe benziyor.

sütun yönündeki esnek bir kap, ek sütunları barındıracak şekilde genişlemeyecektir. (Bu flex-direction: row bir sorun değildir .)

bu soru birçok kez soruldu (aşağıdaki listeye bakın), CSS'DE temiz cevaplar yok.

sorun tüm büyük tarayıcılarda oluşur çünkü bu bir hata olarak pin zor. Ama soruyu gündeme getiriyor:

tüm büyük tarayıcıların flex kapsayıcısını nasıl alabilmesi mümkün wrap üzerinde satır yönünde genişletin, ancak sütun yönünde değil mi?

en az birinin doğru olacağını düşünürsünüz. Ben sadece sebep üzerinde spekülasyon yapabilirsiniz. Belki de teknik olarak zor bir uygulama oldu ve bu yineleme için raflandı.

güncelleme: Edge V16'da sorun çözülüyor gibi görünüyor.


sorunun İllüstrasyonu

OP sorunu gösteren yararlı bir demo yarattı. Burada kopyalıyorum: http://jsfiddle.net/nwccdwLw/1/


Geçici Çözüm Seçenekleri

yığın taşması topluluğundan Hacky çözümleri:


Daha Fazla Analiz


aynı sorunu açıklayan diğer mesajlar

106
cevap Michael_B 2018-04-13 01:54:10
kaynak

Olası JS çözümü..

var ul = $("ul.ul-to-fix");

if(ul.find("li").length>{max_possible_rows)){
    if(!ul.hasClass("width-calculated")){
        ul.width(ul.find("li").eq(0).width()*ul.css("columns"));
        ul.addClass("width-calculated");
     }
}
0
cevap user2323336 2017-09-06 12:35:57
kaynak

başka bir olası yaklaşım:

ul.tasks {
  column-count: 2; /*or whatever */
}
li.task {
  display: inline-block;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

ayrıca margin-top li.task:first-child ayarlamak gerekebilir onlar üst hizaya yoksa.

-1
cevap Marcus 2018-09-27 11:36:22
kaynak

Diğer sorular html css css3 flexbox