Comment faire des enfants flexbox 100% de la taille de leur parent?

J’essaie de remplir l’espace vertical d’un object flexible dans une boîte flexible.

.container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } 
 

Et voici le JSFiddle

flex-2-child ne remplit pas la hauteur requirejse sauf dans les deux cas où:

  1. flex-2 a une hauteur de 100% (ce qui est étrange car un élément flexible a 100% par défaut + il est bogué dans Chrome)
  2. flex-2-child a une position absolue qui est également incommode

Cela ne fonctionne pas dans Chrome ou Firefox actuellement.

J’ai répondu à une question similaire ici .

Je sais que vous avez déjà dit position: absolute; est incommode mais ça marche. Voir ci-dessous pour plus d’informations sur la résolution du problème de redimensionnement.

Voir aussi ce jsFiddle pour une démo, même si je n’ai ajouté que des préfixes webkit donc ouverts dans Chrome.

Vous avez essentiellement 2 questions que je traiterai séparément.

  1. Obtenir que l’enfant d’un object flexible remplisse la taille à 100%
    • Définir la position: relative; sur le parent de l’enfant.
    • position: absolute; réglage position: absolute; sur l’enfant.
    • Vous pouvez ensuite définir la largeur / hauteur selon vos besoins (100% dans mon échantillon).
  2. Correction du “redimensionnement” du défilement du redimensionnement dans Chrome
    • Mettez overflow-y: auto; sur le div défilant
    • Le div scrollable doit avoir une hauteur explicite spécifiée. Mon échantillon a déjà une hauteur de 100% mais si aucun n’est déjà appliqué, vous pouvez spécifier la height: 0;

Voir cette réponse pour plus d’informations sur le problème de défilement.

Si je comprends bien, vous voulez que flex-2-child remplisse la hauteur et la largeur de son parent, de sorte que la zone rouge soit entièrement couverte par le vert?

Si oui, il vous suffit de définir flex-2 pour utiliser flexbox:

 .flex-2 { display: flex; } 

Dites ensuite à flex-2-child de devenir flexible:

 .flex-2-child { flex: 1; } 

Voir http://jsfiddle.net/2ZDuE/10/

La raison en est que flex-2-child n’est pas un élément flexbox, mais son parent est.

Semblable à la réponse de David Storey, mon travail est le suivant:

 .flex-2 { align-items: stretch; display: flex; } 

Alternativement pour align-items , vous pouvez utiliser align-self sur l’ .flex-2-child vous voulez étirer.

Je suppose que le comportement de Chrome est plus cohérent avec les spécifications CSS (bien que ce soit moins intuitif). Selon la spécification Flexbox, la valeur d’ stretch par défaut de align-self propriété align-self ne modifie que la valeur utilisée de la “propriété de taille croisée” de l’élément ( height , dans ce cas). Et, si j’ai bien compris la spécification CSS2.1 , les hauteurs en pourcentage sont calculées à partir de la valeur spécifiée de la height du parent, et non de sa valeur utilisée. La valeur spécifiée de la height du parent n’est affectée par aucune propriété Flex et est toujours auto .

Réglage de la height: 100% explicite height: 100% permet de calculer formellement la hauteur en pourcentage de l’enfant, tout comme le réglage de la height: 100% en html permet de calculer le pourcentage de hauteur du body en CSS2.1.

html

 

css

 .container { height: 200px; width: 500px; display: -moz-box; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-1 { flex:1 0 100px; background-color: blue; } .flex-2 { -moz-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1 0 100%; background-color: red; } .flex-2-child { flex: 1 0 100%; height:100%; background-color: green; } 

http://jsfiddle.net/2ZDuE/750/

Une idée serait que l’ display:flex; avec flex-direction: row; remplit le container div avec .flex-1 et .flex-2 , mais cela ne signifie pas que .flex-2 a une height:100%; par défaut height:100%; même si elle est étendue à la pleine hauteur et avoir un élément enfant ( .flex-2-child ) avec height:100%; vous devrez définir le parent à la height:100%; ou utiliser l’ display:flex; avec flex-direction: row; sur le div .flex-2 aussi.

De ce que je sais display:flex ne va pas étendre la hauteur de tous vos éléments enfants à 100%.

Une petite démo, a enlevé la hauteur de .flex-2-child et utilisé l’ display:flex; sur .flex-2 : http://jsfiddle.net/2ZDuE/3/

J’ai trouvé la solution par moi-même, supposons que vous ayez le CSS ci-dessous:

 .parent { align-items: center; display: flex; justify-content: center; } .child { height: 100%; <- didn't work } 

Dans ce cas, régler la hauteur à 100% ne fonctionnera pas, alors ce que je fais est de définir la règle de margin-bottom sur auto , comme:

 .child { margin-bottom: auto; } 

et l'enfant sera aligné sur la partie supérieure du parent, vous pouvez également utiliser la règle d' align-self si vous préférez.

 .child { align-self: flex-start; } 

Ceci est ma solution en utilisant css +

Tout d’abord, si le premier enfant (flex-1) devrait avoir 100px, il ne devrait pas s’agir d’un flex. En fait, css + vous pouvez définir des éléments flexibles et / ou statiques (colonnes ou lignes) et votre exemple devient aussi simple que cela:

 
100px
flex

conteneur css:

 .container { height: 200px; width: 500px; position:relative; } 

et évidemment inclure css + 0.2 core

entendre le violon