Lorsque les éléments flexbox s'enroulent en mode colonne, le conteneur n'augmente pas sa largeur

Je travaille sur une mise en page flexbox imbriquée qui devrait fonctionner comme suit:

Le niveau le plus à l'extérieur ( ul#main) est une liste horizontale qui doit s'étendre vers la droite lorsque d'autres éléments y sont ajoutés. S'il devient trop grand, il devrait y avoir une barre de défilement horizontale.

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

Chaque élément de cette liste ( ul#main > li) a un en-tête ( ul#main > li > h2) et une liste interne ( ul#main > li > ul.tasks). Cette liste interne est verticale et doit être intégrée dans des colonnes si nécessaire. Lors de l'encapsulation dans plus de colonnes, sa largeur doit augmenter pour faire de la place pour plus d'éléments. Cette augmentation de largeur doit également s'appliquer à l'élément contenant de la liste externe.

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

Mon problème est que les listes internes ne s'enroulent pas lorsque la hauteur de la fenêtre devient trop petite. J'ai essayé beaucoup de falsification de toutes les propriétés flex, en essayant de suivre méticuleusement les directives de CSS-Tricks , mais pas de chance.

Ce JSFiddle montre ce que j'ai jusqu'à présent.

Résultat attendu (ce que je veux) :

Résultat réel (ce que j'obtiens) :

Résultat plus ancien (ce que j'ai obtenu en 2015) :

METTRE À JOUR

Après quelques recherches, cela commence à ressembler à un problème plus important. Tous les principaux navigateurs se comportent de la même manière , et cela n'a rien à voir avec l'imbrication de ma conception flexbox. Les dispositions de colonne Flexbox encore plus simples refusent d'augmenter la largeur de la liste lorsque les éléments sont enveloppés.

Cet autre JSFiddle démontre clairement le problème. Dans les versions actuelles de Chrome, Firefox et IE11, tous les éléments sont correctement enveloppés; la hauteur de la liste augmente en rowmode, mais sa largeur n'augmente pas en columnmode. De plus, il n'y a pas du tout de redistribution immédiate des éléments lors du changement de hauteur d'un columnmode, mais il y en a en rowmode.

Cependant, les spécifications officielles (regardez spécifiquement l'exemple 5) semblent indiquer que ce que je veux faire devrait être possible.

Quelqu'un peut-il trouver une solution de contournement à ce problème?

MISE À JOUR 2

Après de nombreuses expériences en utilisant JavaScript pour mettre à jour la hauteur et la largeur de divers éléments lors des événements de redimensionnement, j'en suis venu à la conclusion qu'il est trop complexe et trop difficile d'essayer de le résoudre de cette façon. De plus, l'ajout de JavaScript rompt définitivement le modèle de flexbox, qui doit être maintenu aussi propre que possible.

Pour l'instant, je reviens à la overflow-y: autoplace de flex-wrap: wrappour que le conteneur interne défile verticalement en cas de besoin. Ce n'est pas joli, mais c'est une voie à suivre qui au moins ne rompt pas trop la convivialité.

Le problème

Cela ressemble à une lacune fondamentale dans la disposition flexible.

Un conteneur flexible dans le sens des colonnes ne se développera pas pour accueillir des colonnes supplémentaires. (Ce n'est pas un problème dans flex-direction: row.)

Cette question a été posée plusieurs fois (voir la liste ci-dessous), sans réponse claire en CSS.

Il est difficile d'épingler cela comme un bogue car le problème se produit dans tous les principaux navigateurs. Mais cela soulève la question:

Comment est-il possible que tous les principaux navigateurs aient le conteneur flex pour se développer lors de l'enroulement dans le sens des lignes mais pas dans le sens des colonnes?

On pourrait penser qu'au moins l'un d'entre eux ferait les choses correctement. Je ne peux que spéculer sur la raison. C'était peut-être une implémentation techniquement difficile et a été mise de côté pour cette itération.

MISE À JOUR: le problème semble être résolu dans Edge v16.

Illustration du problème

L'OP a créé une démonstration utile illustrant le problème. Je le copie ici: http://jsfiddle.net/nwccdwLw/1/

Options de contournement

Solutions Hacky de la communauté Stack Overflow:

• "Il semble que ce problème ne puisse pas être résolu uniquement avec CSS, je vous propose donc une solution JQuery."

• "Il est curieux que la plupart des navigateurs n'aient pas implémenté correctement les conteneurs flex de colonne, mais la prise en charge des modes d'écriture est raisonnablement bonne. Par conséquent, vous pouvez utiliser un conteneur flex de ligne avec un mode d'écriture vertical."

Plus d'analyse

• Rapport de bogue de chrome

• Réponse de Mark Amery

Autres articles décrivant le même problème

• La largeur du conteneur Flex Box n'augmente pas
• Comment puis-je faire en sorte qu'un conteneur display: flex se développe horizontalement avec son contenu enveloppé?
• Flex-flow: enveloppe de colonne. Comment définir la largeur du conteneur égale au contenu?
• Colonne Flexbox Flex-Flow enveloppant des bogues en chrome?
• Comment utiliser "flex-flow: column wrap"?
• Le conteneur Flex ne se développe pas lorsque le contenu est enveloppé dans une colonne
• flex-flow: enveloppe de colonne, dans une boîte flexible provoquant un débordement du conteneur parent
• Le conteneur Flexbox HTML ne se développe pas sur les enfants enveloppés
• Conteneur Flexbox et enfants flex débordants?
• Comment puis-je créer un conteneur Flexbox qui s'étire pour s'adapter aux articles emballés?
• Conteneur flexible calculant une colonne, lorsqu'il y a plusieurs colonnes
• Rendre le conteneur pleine largeur avec flex
• Redimensionnement du conteneur Flexbox possible?
• Flex-Wrap à l'intérieur de Flex-Grow
• Flexbox grandit pour contenir
• Développer l'élément flexbox à son contenu?
• extension de colonne flexbox pour s'adapter au contenu
• https://stackoverflow.com/q/48406237/3597276
• flex-flow: l'enroulement de la colonne n'étire pas la largeur de l'élément parent
• Pourquoi mon <ul> n'agrandit-il pas la largeur pour couvrir tous les <li>?
• Comment ajuster la largeur lorsque les colonnes flexbox s'enroulent?
• L'emballage Flexbox n'augmente pas la largeur du parent?

En retard à la fête, mais rencontrait toujours ce problème des années plus tard. J'ai fini par trouver une solution en utilisant la grille. Sur le conteneur, vous pouvez utiliser

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

J'ai un exemple sur CodePen qui bascule entre le problème de la flexbox et le correctif de la grille: https://codepen.io/MandeeD/pen/JVLdLd

Il est malheureux que tant de grands navigateurs souffrent de ce bug après de nombreuses années. Envisagez une solution de contournement Javascript. Chaque fois que la fenêtre du navigateur est redimensionnée ou que du contenu est ajouté à l'élément, exécutez ce code pour le redimensionner à la largeur appropriée. Vous pouvez définir une directive dans votre cadre pour le faire à votre place.

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

Je viens de trouver une solution de contournement PURE CSS vraiment géniale ici.

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

Le plus délicat: définir writing-mode: vertical-lrdans la liste div puis writing-mode: horizontal-tbdans l'élément de liste. J'ai dû peaufiner les styles dans le JSFiddle (supprimer une grande partie des styles d'alignement, qui ne sont pas nécessaires pour la solution).

Remarque: le commentaire indique que cela ne fonctionne que dans les navigateurs basés sur Chromium, et non dans Firefox. Je n'ai personnellement testé que dans Chrome. Il est possible qu'il y ait un moyen de modifier cela pour le faire fonctionner dans d'autres navigateurs ou qu'il y ait eu des mises à jour de ces navigateurs qui font que cela fonctionne.

Grand bravo à ce commentaire: lorsque les éléments flexbox s'enroulent en mode colonne, le conteneur n'augmente pas sa largeur . Fouiller ce fil de discussion m'a conduit à https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39 qui m'a conduit à ce JSFiddle.

Puisqu'aucune solution ou solution de contournement appropriée n'a encore été suggérée, j'ai réussi à obtenir le comportement demandé avec une approche légèrement différente. Au lieu de séparer la mise en page en 3 divs différents, j'ajoute tous les éléments en 1 div et crée la séparation avec quelques divs supplémentaires entre les deux.

La solution proposée est codée en dur, en supposant que nous avons 3 sections, mais peut être étendue à une section générique. L'idée principale est d'expliquer comment nous pouvons réaliser cette mise en page.

1. Ajout de tous les éléments dans 1 conteneur div qui utilise flex pour envelopper les éléments
2. Le premier élément de chaque "conteneur interne" (je l'appellerai une section) aura une classe, ce qui nous aide à faire quelques manipulations qui créent la séparation et le style de chaque section.
3. En utilisant :beforesur chaque premier élément, nous pouvons localiser le titre de chaque section.
4. L'utilisation spacecrée un espace entre les sections
5. Étant donné que le spacene couvre pas toute la hauteur de la section, j'ajoute également :afteraux sections afin de le positionner avec une position absolue et un fond blanc.
6. Pour styliser la couleur d'arrière-plan de chaque section, j'ajoute un autre div à l'intérieur du premier élément de chaque section. Je serai aussi en position absolue et l'aurai z-index: -1.
7. Pour obtenir la largeur correcte de chaque arrière-plan, j'utilise JS, en définissant la largeur correcte et en ajoutant également un écouteur à redimensionner.

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>

Solution JS possible.

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