Lorsque les articles flexbox envelopper en mode colonne, conteneur n'augmente pas sa largeur

je travaille sur un schéma de flexbox emboîté qui devrait fonctionner comme suit:

ultrapériphériques niveau ( ul#main ) est une liste horizontale qui doit étendre vers la droite lorsque plusieurs éléments 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 intérieure est verticale et devrait s'inscrire dans les colonnes en cas de besoin. En enveloppant dans plus de colonnes, sa largeur devrait augmenter pour faire de la place pour plus d'articles. Cette augmentation de largeur devrait également s'appliquer à la rubrique contenant la liste extérieure.

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

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

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

résultat escompté (ce que je veux) :

My desired output

résultat (ce que je reçois) :

My current output

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

My older output

UPDATE

après une enquête, ça commence à ressembler à un plus gros problème. tous les navigateurs principaux se comportent de la même manière , et il n'a rien à voir avec ma conception flexbox étant imbriqué. La disposition des colonnes flexbox encore plus simple refuse d'augmenter la largeur de la liste lorsque les articles s'enveloppent.

Ce autres JSFiddle démontre clairement le problème. Dans les versions actuelles de Chrome, Firefox et IE11, tous les éléments enveloppent 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 retour immédiat d'éléments lors du changement de hauteur d'un mode column , mais il y a en mode row .

cependant, le spécifications officielles (voir l'exemple 5) semblent indiquer que ce que je veux faire devrait être possible.

quelqu'un Peut venir avec une solution à ce problème?

UPDATE 2

après beaucoup d'expériences en utilisant 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'il est trop complexe et trop de peine à essayer de le résoudre de cette façon. De plus, L'ajout de JavaScript va définitivement à l'encontre du modèle flexbox, qui doit être maintenu aussi propre que possible.

pour l'instant, je retombe à overflow-y: auto au lieu de flex-wrap: wrap de sorte que le conteneur intérieur se déforme verticalement au besoin. Ce n'est pas beau à voir, mais c'est une façon d'aller de l'avant qui ne brise pas trop la facilité d'utilisation.

101
demandé sur Anders Tornblad 2015-11-24 13:55:00
la source

3 ответов

Le Problème

cela ressemble à une déficience fondamentale dans la mise en page flex.

un conteneur souple en colonne-direction ne s'étendra 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 liste ci-dessous), sans réponse claire dans CSS.

il est difficile d'épingler ceci comme un bug parce que le problème se produit à travers tous les navigateurs principaux. Mais cela pose la question:

Comment est-il possible que tous les principaux navigateurs ont obtenu le conteneur flex à étendre sur wrap dans le sens de la rangée, mais pas dans le sens de la colonne?

on pourrait penser que au moins l'un d'entre eux. Je ne peux que spéculer sur la raison. Il s'agissait peut-être d'une mise en œuvre techniquement difficile qui a été mise de côté pour cette itération.

mise à jour: le le problème semble résolu dans Edge v16.


Illustration du problème

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


Options De Contournement

Hacky des solutions dans le Débordement de la Pile de la communauté:


D'Autres Analyses


D'autres Billets décrivant le même problème

106
répondu Michael_B 2018-04-13 01:54:10
la source

solution possible 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");
     }
}
0
répondu user2323336 2017-09-06 12:35:57
la source

une autre approche possible:

ul.tasks {
  column-count: 2; /*or whatever */
}
li.task {
  display: inline-block;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

vous pouvez également avoir besoin d'ajuster margin-top de li.task:first-child s'ils ne s'alignent pas sur le dessus.

-1
répondu Marcus 2018-09-27 11:36:22
la source

Autres questions sur html css css3 flexbox