Kiedy elementy flexbox zawijają się w trybie kolumnowym, kontener nie zwiększa swojej szerokości

Pracuję nad zagnieżdżonym układem flexbox, który powinien działać w następujący sposób:

Najbardziej zewnętrzny poziom ( ul#main) to lista pozioma, która musi zostać rozszerzona w prawo, gdy zostanie do niej dodanych więcej elementów. Jeśli będzie zbyt duży, powinien pojawić się poziomy pasek przewijania.

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

Każda pozycja tej listy ( ul#main > li) ma nagłówek ( ul#main > li > h2) i wewnętrzną listę ( ul#main > li > ul.tasks). Ta wewnętrzna lista jest pionowa i w razie potrzeby powinna być zawijana w kolumny. Przy zawijaniu w więcej kolumn jego szerokość powinna się zwiększyć, aby zrobić miejsce na więcej elementów. To zwiększenie szerokości powinno dotyczyć również pozycji zawierającej wykaz zewnętrzny.

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

Mój problem polega na tym, że wewnętrzne listy nie zawijają się, gdy wysokość okna jest zbyt mała. Próbowałem wielu zmian we wszystkich właściwościach flex, starając się skrupulatnie przestrzegać wytycznych CSS-Tricks , ale bez powodzenia.

Ten JSFiddle pokazuje, co mam do tej pory.

Oczekiwany wynik (czego chcę) :

Rzeczywisty wynik (co otrzymuję) :

Starszy wynik (jaki uzyskałem w 2015 roku) :

AKTUALIZACJA

Po pewnym dochodzeniu zaczyna wyglądać na większy problem. Wszystkie główne przeglądarki zachowują się w ten sam sposób i nie ma to nic wspólnego z zagnieżdżeniem mojego projektu flexbox. Jeszcze prostsze układy kolumn flexbox odmawiają zwiększenia szerokości listy, gdy elementy są zawijane.

Ten inny JSFiddle wyraźnie pokazuje problem. W aktualnych wersjach przeglądarek Chrome, Firefox i IE11 wszystkie elementy są poprawnie zawijane; wysokość listy wzrasta w rowtrybie, ale jej szerokość nie zwiększa się w columntrybie. Ponadto nie ma żadnego natychmiastowego ponownego przepływu elementów podczas zmiany wysokości columntrybu, ale jest wrow trybie.

Jednak oficjalne specyfikacje (spójrz konkretnie na przykład 5) wydają się wskazywać, że to, co chcę zrobić, powinno być możliwe.

Czy ktoś może wymyślić obejście tego problemu?

AKTUALIZACJA 2

Po wielu eksperymentach z wykorzystaniem JavaScript do aktualizowania wysokości i szerokości różnych elementów podczas zdarzeń zmiany rozmiaru, doszedłem do wniosku, że próba rozwiązania tego problemu w ten sposób jest zbyt złożona i zbyt trudna. Ponadto dodanie JavaScript zdecydowanie łamie model flexbox, który powinien być tak czysty, jak to tylko możliwe.

Na razie cofam się do overflow-y: autozamiast, aby w flex-wrap: wraprazie potrzeby wewnętrzny pojemnik przewijał się pionowo. Nie jest ładna, ale jest to jedna z możliwości, która przynajmniej nie narusza zbytnio użyteczności.

Problem

Wygląda to na fundamentalną wadę układu flex.

Pojemnik elastyczny w kierunku kolumn nie rozszerzy się, aby pomieścić dodatkowe kolumny. (To nie jest problem flex-direction: row.)

To pytanie było zadawane wiele razy (zobacz listę poniżej), bez wyraźnych odpowiedzi w CSS.

Trudno to uznać za błąd, ponieważ problem występuje we wszystkich głównych przeglądarkach. Ale rodzi pytanie:

Jak to możliwe, że wszystkie główne przeglądarki uzyskały rozszerzenie kontenera elastycznego podczas zawijania w kierunku wierszy, ale nie w kierunku kolumny?

Można by pomyśleć, że przynajmniej jeden z nich zrobi to dobrze. Mogę tylko spekulować na temat przyczyny. Może była to technicznie trudna implementacja i została odłożona na półkę na tę iterację.

AKTUALIZACJA: Problem wydaje się być rozwiązany w Edge v16.

Ilustracja problemu

OP stworzył przydatne demo ilustrujące problem. Kopiuję to tutaj: http://jsfiddle.net/nwccdwLw/1/

Opcje obejścia

Hacky rozwiązania społeczności Stack Overflow:

• „Wygląda na to, że tego problemu nie da się rozwiązać tylko za pomocą CSS, więc proponuję rozwiązanie JQuery”.

• „Ciekawe, że większość przeglądarek nie zaimplementowała poprawnie kontenerów flex z kolumnami, ale obsługa trybów pisania jest dość dobra. Dlatego możesz użyć kontenera wierszowego z trybem pisania w pionie”.

Więcej analiz

• Raport o błędzie Chromium

• Odpowiedź Marka Amery

Inne posty opisujące ten sam problem

• Szerokość pojemnika Flex Box nie rośnie
• Jak mogę zrobić wyświetlacz: kontener elastyczny rozszerza się w poziomie wraz z opakowaną zawartością?
• Flex-flow: owijanie kolumny. Jak ustawić szerokość kontenera równą zawartości?
• Błędy w owijce kolumny Flexbox Flex-Flow w chromie?
• Jak używać „flex-flow: zawijanie kolumn”?
• Kontener elastyczny nie rozszerza się, gdy zawartość zawija się w kolumnie
• flex-flow: zawijanie kolumny, w skrzynce flex, powodujące przepełnienie kontenera nadrzędnego
• Kontener HTML flexbox nie rozszerza się na opakowane dzieci
• Pojemnik Flexbox i przepełnione elastyczne dzieci?
• Jak mogę wykonać pojemnik typu flexbox, który rozciąga się, aby pasował do opakowanych przedmiotów?
• Elastyczny kontener obliczający jedną kolumnę, gdy istnieje wiele kolumn
• Spraw, aby pojemnik miał pełną szerokość dzięki flex
• Możliwa zmiana rozmiaru kontenera Flexbox?
• Flex-Wrap Inside Flex-Grow
• Flexbox rośnie, by zawierać
• Rozwinąć element flexbox do jego zawartości?
• rozciąganie kolumny flexbox w celu dopasowania do zawartości
• https://stackoverflow.com/q/48406237/3597276
• flex-flow: zawijanie kolumn nie rozciąga szerokości elementu nadrzędnego
• Dlaczego moja szerokość rozwijania <ul> nie obejmuje wszystkich <li>?
• Jak dostosować szerokość podczas zawijania kolumn Flexbox?
• Owijka Flexbox nie zwiększa szerokości rodzica?

Spóźnił się na imprezę, ale LATA później napotkał ten problem. Skończyło się na znalezieniu rozwiązania za pomocą siatki. Na pojemniku możesz użyć

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

Mam przykład na CodePen, który przełącza się między problemem flexbox a poprawką siatki: https://codepen.io/MandeeD/pen/JVLdLd

Szkoda, że ​​tak wiele głównych przeglądarek po wielu latach cierpi z powodu tego błędu. Rozważ obejście JavaScript. Za każdym razem, gdy okno przeglądarki zmieni rozmiar lub zawartość zostanie dodana do elementu, wykonaj ten kod, aby zmienić rozmiar na odpowiednią szerokość. Możesz zdefiniować dyrektywę w swoim frameworku, aby zrobić to za Ciebie.

    element.style.flexBasis = "auto";
    element.style.flexBasis = `${element.scrollWidth}px`;

Właśnie znalazłem tutaj naprawdę świetne obejście PURE CSS.

https://jsfiddle.net/gcob492x/3/

Trudność: ustaw writing-mode: vertical-lrw liście divwriting-mode: horizontal-tb w elemencie listy. Musiałem dostosować style w JSFiddle (usunąć wiele stylów wyrównania, które nie są konieczne do rozwiązania).

Uwaga: komentarz mówi, że działa tylko w przeglądarkach opartych na Chromium, a nie Firefox. Osobiście testowałem tylko w Chrome. Możliwe, że istnieje sposób, aby to zmodyfikować, aby działał w innych przeglądarkach, albo zostały zaktualizowane przeglądarki, które to umożliwiają.

Wielki okrzyk na ten komentarz: Kiedy elementy flexbox zawijają się w trybie kolumnowym, kontener nie zwiększa swojej szerokości . Przeglądanie tego wątku doprowadziło mnie do https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39, który doprowadził mnie do tego JSFiddle.

Ponieważ nie zaproponowano jeszcze rozwiązania ani odpowiedniego obejścia, udało mi się uzyskać żądane zachowanie przy nieco innym podejściu. Zamiast rozdzielać układ na 3 różne elementy div, dodaję wszystkie elementy do jednego elementu div i utworzę separację z kilkoma elementami div pomiędzy nimi.

Proponowane rozwiązanie jest zakodowane na stałe, zakładając, że mamy 3 sekcje, ale można je rozszerzyć na ogólną. Głównym pomysłem jest wyjaśnienie, w jaki sposób możemy osiągnąć ten układ.

1. Dodanie wszystkich elementów do 1 kontenera div, który używa flex do zawijania elementów
2. Pierwszy element każdego „pojemnika wewnętrznego” (nazywam go sekcją) będzie miał klasę, która pomoże nam wykonać pewne manipulacje, które tworzą separację i stylizację każdej sekcji.
3. Korzystając :beforez każdego pierwszego elementu, możemy zlokalizować tytuł każdej sekcji.
4. Użycie spacetworzy lukę między sekcjami
5. Ponieważ spacenie obejmuje całej wysokości sekcji, dodaję również :afterdo sekcji, ustawiając ją z pozycją bezwzględną i białym tłem.
6. Aby nadać styl kolorowi tła każdej sekcji, dodaję kolejny element div w pierwszym elemencie każdej sekcji. Będę też stanowił stanowisko absolutne i będę miałz-index: -1 .
7. Aby uzyskać odpowiednią szerokość każdego tła, używam JS, ustawiając odpowiednią szerokość, a także dodając odbiornik do zmiany rozmiaru.

function calcWidth() {
  var size = $(document).width();
  var end = $(".end").offset().left;

  var todoWidth = $(".doing-first").offset().left;
  $(".bg-todo").css("width", todoWidth);

  var doingWidth = $(".done-first").offset().left - todoWidth;
  $(".bg-doing").css("width", doingWidth);

  var doneWidth = $(".end").offset().left - $(".done-first").offset().left;
  $(".bg-done").css("width", doneWidth + 20);

}

calcWidth();

$(window).resize(function() {
  calcWidth();
});

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 120px;
  align-content: flex-start;
  padding-top: 30px;
  overflow-x: auto;
  overflow-y: hidden;
}

.item {
  width: 200px;
  background-color: #e5e5e5;
  border-radius: 5px;
  height: 20px;
  margin: 5px;
  position: relative;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  padding: 5px;
}

.space {
  height: 150px;
  width: 10px;
  background-color: #fff;
  margin: 10px;
}

.todo-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "To Do (2)";
  font-weight: bold;
}

.doing-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "Doing (5)";
  font-weight: bold;
}

.doing-first:after,
.done-first:after {
  position: absolute;
  top: -35px;
  left: -25px;
  width: 10px;
  height: 180px;
  z-index: 10;
  background-color: #fff;
  content: "";
}

.done-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "Done (3)";
  font-weight: bold;
}

.bg-todo {
  position: absolute;
  background-color: #FFEFD3;
  width: 100vw;
  height: 150px;
  top: -30px;
  left: -10px;
  z-index: -1;
}

.bg-doing {
  position: absolute;
  background-color: #EFDCFF;
  width: 100vw;
  height: 150px;
  top: -30px;
  left: -15px;
  z-index: -1;
}

.bg-done {
  position: absolute;
  background-color: #DCFFEE;
  width: 10vw;
  height: 150px;
  top: -30px;
  left: -15px;
  z-index: -1;
}

.end {
  height: 150px;
  width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="item todo-first">
    <div class="bg-todo"></div>
    Drink coffee
  </div>
  <div class="item">Go to work</div>

  <div class="space"></div>

  <div class="item doing-first">
    <div class="bg-doing"></div>
    1
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

  <div class="space"></div>

  <div class="item done-first">
    <div class="bg-done"></div>
    1
  </div>
  <div class="item">2</div>
  <div class="item">3</div>

  <div class="end"></div>

</div>

Możliwe rozwiązanie JS ..

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");
     }
}