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

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