Le conteneur n'augmente pas sa largeur lorsque l'élément Flexbox est renvoyé en mode colonne

Question

Je développe une mise en page Flexbox imbriquée qui fonctionne comme ceci :

Le niveau le plus externe (ul#main) est une liste horizontale qui doit s'étendre vers la droite lorsque d'autres éléments 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) 都有一个标头 (ul#main > li > h2) 和一个内部列表 (ul#main > li > ul.tasks). Cette liste interne est verticale et doit être divisée en colonnes si nécessaire. Au fur et à mesure qu'il s'enroule dans davantage de colonnes, sa largeur devrait augmenter pour laisser de la place à davantage d'éléments. Cette augmentation de largeur devrait également s'appliquer aux éléments contenant de la liste externe.

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

Mon problème est que lorsque la hauteur de la fenêtre est trop petite, la liste intérieure ne s'enroule pas. J'ai essayé beaucoup de falsification de toutes les propriétés Flex, en essayant de suivre strictement les directives de CSS-Tricks, mais sans succès.

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

Résultats attendus (ce que je veux) :

Résultats réels (ce que j'ai obtenu) :

Résultats plus anciens (résultats que j'ai obtenus en 2015) :

Mise à jour

Après quelques investigations, cela a commencé à ressembler à un problème plus grave. Tous les principaux navigateurs se comportent de la même manière, cela n'a rien à voir avec la conception de ma Flexbox imbriquée. Même la disposition plus simple des colonnes Flexbox n'augmente pas la largeur de la liste à mesure que les éléments sont renvoyés à la ligne.

Un autre JSFiddle démontre clairement le problème. Dans les versions actuelles de Chrome, Firefox et IE11, tous les éléments s'ajustent correctement ; row 模式下列表的高度会增加，但在 column 模式下其宽度不会增加。另外，当更改 column 模式的高度时，根本不会立即回流元素，但在 row

Cependant, la spécification officielle

(voir exemple 5 pour plus de détails) semble 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 de nombreuses tentatives d'utilisation de JavaScript pour mettre à jour la hauteur et la largeur de divers éléments lors d'événements de redimensionnement, je suis arrivé à la conclusion qu'essayer de le résoudre de cette façon est trop compliqué et fastidieux. De plus, l'ajout de JavaScript brisera définitivement le modèle Flexbox, qui doit rester aussi propre que possible.

Maintenant, je reviens sur

pour que le conteneur intérieur défile verticalement si nécessaire. Ce n'est pas joli, mais c'est une approche qui au moins ne perturbe pas trop la convivialité. overflow-y: auto 而不是 flex-wrap:wrapper

Answer 1

En retard à la fête mais j'ai toujours ce problème des années plus tard. J'ai finalement trouvé une solution en utilisant une grille. Sur le contenant, vous pouvez utiliser

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

J'ai un exemple sur CodePen pour basculer entre les problèmes Flexbox et les correctifs de maillage : https://codepen .io/MandeeD/pen/JVLdLd

Answer 2

Question

Cela ressemble à un défaut fondamental dans la disposition flexible.

Les conteneurs flexibles orientés colonnes ne s'étendent pas pour accueillir des colonnes supplémentaires. (Ce n'est pas un problème en flex-direction: row.)

Cette question a été posée à plusieurs reprises (voir liste ci-dessous) et il n'y a pas de réponse claire en CSS.

Il est difficile d'identifier cela comme un bug car le problème se produit dans tous les principaux navigateurs. Mais cela soulève une question :

On pourrait penser qu'au moins l'un d'entre eux réussirait. Je ne peux que spéculer sur la raison. Il s’agissait peut-être d’une implémentation techniquement difficile et donc mise de côté pour cette itération.

Mise à jour : Ce problème semble avoir été résolu dans Edge v16.

---

Description du problème

OP a créé une démo utile pour illustrer le problème. Je l'ai copié ici : http://jsfiddle.net/nwccdwLw/1/ p>

---

Options de solution 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 recommande donc d'utiliser la solution JQuery."

• "Étrangement, la plupart des navigateurs n'implémentent pas correctement les conteneurs flexibles de colonnes, mais la prise en charge du mode écriture est plutôt bonne. Vous pouvez donc utiliser les conteneurs flexibles de lignes en mode d'écriture vertical."
  Plus d'analyses

---

Rapport de bug Chrome

• Réponse de Mark Emery

---

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

• La largeur du conteneur Flex Box n'augmentera pas
• Comment faire en sorte qu'un conteneur display:flex s'étende horizontalement avec son contenu enveloppé ?
• Flex-flow : Emballage de colonnes. Comment définir la largeur du conteneur égale au contenu ?
• Erreur d'encapsulage de colonne Flexbox Flex-flow dans Chrome ?
• Comment utiliser « flex-flow : column wrap » ?
• Le conteneur Flex ne se développera pas lorsque le contenu est enveloppé dans des colonnes
• flex-flow : retour à la ligne de colonne, provoquant le débordement du conteneur parent dans la flexbox
• Le conteneur HTML Flexbox ne s'étend pas sur les enfants emballés
• Conteneur Flexbox et enfants Flex débordants ?
• Comment fabriquer un conteneur Flexbox qui s'étire pour s'adapter aux articles emballés ?
• Lorsqu'il y a plusieurs colonnes, le conteneur Flex calcule une colonne
• Utilisez Flex pour rendre le conteneur pleine largeur
• Les conteneurs Flexbox peuvent-ils être redimensionnés ?
• Flex-Wrap intégré Flex-Grow
• Flexbox progressivement incluse
• Développer un élément flexbox à son contenu ?
• Les colonnes Flexbox s'étirent pour s'adapter au contenu
• https://stackoverflow.com/q/48406237/3597276
• flex-flow : le retour à la ligne des colonnes n'étire pas la largeur de l'élément parent
• Pourquoi mon
  ne s'étend-il pas en largeur pour couvrir tout
  •  ?
• https://stackoverflow.com/q/55709208/3597276
• Le retour à la ligne Flexbox n'augmentera pas la largeur du parent ?
• Le conteneur Absolute Flex n'a pas été modifié pour corriger la largeur définissant la hauteur maximale
• Le div de bloc en ligne parent est plus étroit que le div enfant avec flex-wrap