Lorsque les éléments de la boîte flexible sont en mode colonne, le conteneur ne grossit pas

Je travaille sur une mise en page flexbox nestede 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 plusieurs éléments y sont ajoutés. Si elle devient trop grande, 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 devrait être placée dans des colonnes si nécessaire. Lorsque vous encapsulez davantage de colonnes, sa largeur doit augmenter pour laisser de la place à d’autres éléments. Cette augmentation de largeur devrait é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é de nombreuses manipulations avec toutes les propriétés de flex, en essayant de suivre les directives de CSS-Tricks méticuleusement, mais pas de chance.

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

Résultat attendu (ce que je veux) :

Ma sortie désirée

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

Ma sortie actuelle

Ancien résultat (ce que j’ai eu en 2015) :

Mon ancienne sortie

METTRE À JOUR

Après quelques investigations, 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 la conception de ma conception de la boîte flexible. Même des mises en page de colonnes flexbox plus simples refusent d’augmenter la largeur de la liste lorsque les articles s’emballent.

Cet autre JSFiddle démontre clairement le problème. Dans les versions actuelles de Chrome, Firefox et IE11, tous les éléments s’emballent correctement. la hauteur de la liste augmente en mode row , mais sa largeur n’augmente pas en mode column . En outre, il n’y a pas de refusion immédiate d’éléments lors de la modification de la hauteur d’un mode column , mais il existe un mode row .

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

Quelqu’un peut-il trouver une solution à ce problème?

MISE À JOUR 2

Après avoir beaucoup expérimenté l’utilisation de JavaScript pour mettre à jour la hauteur et la largeur de divers éléments lors des événements de redimensionnement, je suis arrivé à la conclusion qu’il était trop complexe et trop compliqué pour essayer de le résoudre de cette manière. En outre, l’ajout de JavaScript brise définitivement le modèle Flexbox, qui doit restr aussi propre que possible.

Pour le moment, je retombe sur overflow-y: auto au lieu de flex-wrap: wrap pour que le conteneur interne défile verticalement si nécessaire. Ce n’est pas joli, mais c’est une voie à suivre qui au moins ne brise pas trop la facilité d’utilisation.

Le problème

Cela ressemble à une lacune fondamentale dans la mise en page flex.

Un conteneur flexible dans le sens des colonnes ne sera pas étendu pour accueillir des colonnes supplémentaires. (Ce n’est pas un problème en flex-direction: row .)

Cette question a été posée à plusieurs resockets (voir liste ci-dessous), sans aucune réponse claire dans CSS.

Il est difficile de le cerner comme un bogue, car le problème survient dans tous les principaux navigateurs. Mais cela soulève la question:

Comment est-il possible que tous les principaux navigateurs aient eu le conteneur Flex pour étendre le retour à la ligne dans le sens des lignes mais pas dans le sens des colonnes?

Vous penseriez qu’au moins l’un d’entre eux réussirait. 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

Le PO a créé une démo utile illustrant le problème. Je le copie ici: http://jsfiddle.net/nwccdwLw/1/


Options de contournement

Solutions piratées de la communauté Stack Overflow:

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

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


Plus d’parsing

  • Rapport de bogue de chrome

  • La réponse de Mark Amery


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

  • La largeur du conteneur de la boîte flexible ne croît pas
  • Comment puis-je créer un affichage: le conteneur flexible se dilate horizontalement avec son contenu enveloppé?
  • Flex-flow: enroulement de la colonne. Comment définir la largeur du conteneur égale au contenu?
  • Flexbox Flex-Flow Colour Wrap Bugs en chrome?
  • Comment utiliser “flex-flow: column wrap”?
  • Le conteneur Flex ne s’étend pas lorsque le contenu s’emballe dans une colonne
  • Flex-Flow: enroulement de la colonne, dans une boîte souple provoquant un débordement du conteneur parent
  • Html flexbox conteneur ne se développe pas sur les enfants enveloppés
  • Conteneur Flexbox et enfants flexibles débordants?
  • Comment puis-je créer un conteneur Flexbox qui s’étire pour contenir des articles emballés?
  • Conteneur Flex calculant une colonne lorsqu’il y a plusieurs colonnes
  • Rendre le conteneur pleine largeur avec flex
  • Redimensionnement du conteneur Flexbox possible?
  • Flex-Wrap Inside Flex-Grow
  • Flexbox grandit pour contenir
  • Développez l’élément flexbox à son contenu?
  • étirement de la colonne flexbox pour adapter le contenu
  • L’emballage de la colonne flexbox nestede ne fonctionne pas à l’intérieur de la ligne flexbox
  • flex-flow: le retour à la colonne n’allonge pas la largeur de l’élément parent

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