Comment faire flexbox enfants de 100% de la hauteur de leur parent?

Je suis en train de remplir l'espace vertical d'un flex de l'élément à l'intérieur d'un flexbox.

CSS:

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

HTML:

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

Et voici le JSFiddle

flex-2-child de ne pas remplir la hauteur requise, sauf dans les deux cas où:

flex-2 a une hauteur de 100% (ce qui est bizarre, parce que d'un flex élément a 100% par défaut + il est bogué dans google Chrome)
flex-2-child a une position absolue qui est aussi gênant

Cela ne fonctionne pas avec Chrome ou Firefox actuellement.

quel est le problème avec l'utilisation de height:100%; pour .flex-2 ?
Il défie le but de la flexion de l'élément qui est à remplir le contenu en lui-même et de me donner le plus étrange bug dans chrome où la hauteur revient à zéro à chaque fois que je redimensionner la fenêtre
Firefox versions qui suivent encore la spec à partir de 2009 (affichage: cocher) se comportent très différemment des versions qui suivent le moderne spec. Si FF est défaillante, je vous recommande d'enlever le support pour cela.
En fait, la dernière version de Firefox est le seul à travailler correctement
Actuellement, il existe d'importantes différences de comportement entre les navigateurs quand il s'agit de rendre pourcentage des hauteurs dans flexbox: stackoverflow.com/a/35537510/3597276
Yep, Chrome a certains problèmes, en particulier avec imbriqué flexboxes. Par exemple, j'ai un imbriquée flex zone avec des enfants qui ont height:100% mais ils sont rendu avec hauteur naturelle à la place. Et la chose étrange est que si je change leur hauteur à auto, alors qu'ils rendent height:100% comme j'ai essayé de faire. Ce n'est certainement pas intuitif si c'est la façon dont il devrait fonctionner.

InformationsquelleAutor Raz | 2013-03-13

260

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

Je sais que vous l'avez déjà dit position: absolute; est gênant, mais il fonctionne. Voir ci-dessous pour de plus amples renseignements sur la façon de résoudre le problème de redimensionnement.

Aussi voir ce jsFiddle pour une démo, même si j'ai ajouté webkit préfixes afin de l'ouvrir dans google Chrome.

En gros, vous avez 2 questions que je vais traiter séparément.
1. Préparer l'enfant d'un flex-élément de remplissage hauteur de 100%
  - Ensemble position: relative; sur le parent de l'enfant.
  - Ensemble position: absolute; sur l'enfant.
  - Vous pouvez ensuite définir la largeur/hauteur requise (100% dans mon exemple).
2. La fixation de la redimensionner défilement "bizarrerie" dans Chrome
  - Mettre overflow-y: auto; sur le défilement div.
  - Le défilement div doit être explicitement hauteur spécifiée. Mon exemple a déjà à hauteur de 100%, mais si aucun n'est déjà appliqué, vous pouvez spécifier height: 0;
Voir ce réponse pour plus d'informations sur le défilement de la question.
- Point 1) fonctionne parfaitement dans Chrome, Firefox n'a pas besoin de la position absolue.
- ce doit être la accepté de répondre!
InformationsquelleAutor Brett Postin
202

Si je comprends bien, vous voulez flex-2-enfant pour remplir la hauteur et la largeur de son parent, de sorte que la zone rouge est entièrement couvert par le vert?

Si oui, vous avez juste besoin de mettre en flex-2 pour utiliser flexbox:
```
.flex-2 {
    display: flex;  
}
```
Alors dites-flex-2-enfant à devenir flexible:
```
.flex-2-child {    
    flex: 1;
}
```
Voir http://jsfiddle.net/2ZDuE/10/

La raison en est que flex-2-enfant n'est pas un flexbox, mais ses parent l'est.
- Comment puis-je faire la même chose, juste avec une hauteur de 100% et chaque enfant est 50/50 ?
- Sachez que si vous utilisez "align-éléments: center", vous ne serez pas en mesure d'utiliser ce correctif depuis vos articles seront désormais égale hauteur.
- Vous pouvez toujours utiliser align-items: center si vous utilisez align-self: stretch sur un seul enfant.
- Salut @David, j'ai essayé votre solution, il fonctionne très bien pour le flex-direction: ligne de mise en page, il ne semble pas travailler avec flex-direction: mise en page en colonnes, ou j'ai des endroits mal dans le code. Pourriez-vous aider à vérifier pourquoi dans ce violon jsfiddle.net/78o54Lmv, la boîte intérieure de ne pas occuper toute la hauteur de son parent?
- Je dois ajouter min-height: 100vh; à .flex-2 élément pour en faire des œuvres. Merci pour l'aide!
- Merci! J'oublie toujours ce jusqu'à ce que je tombe sur votre commentaire.
InformationsquelleAutor David Storey
98

Similaire à David Storey réponse, mon travail est environ
```
.flex-2 {
    display: flex;  
    align-items: 'stretch';
}
```
Alternativement à align-items, vous pouvez utiliser align-self juste sur le .flex-2-child élément que vous souhaitez tendu.
- stretch: ce devrait être la réponse choisie.
- Certainement c'est de loin la meilleure réponse pour la question. Fonctionne parfaitement.
InformationsquelleAutor B T
21

Je suppose que google Chrome, le comportement est plus compatible avec les CSS (même si c'est moins intuitif). Selon Flexbox spec, la valeur par défaut stretch valeur de align-self propriété ne change que la utilisé valeur de l'élément de la "croix de la taille de la propriété" (height, dans ce cas). Et, comme je comprends le CSS2.1 spec, le pourcentage des hauteurs sont calculées à partir de la spécifié valeur de la société mère height, pas sa valeur utilisée. La valeur spécifiée de la société mère height n'est pas affectée par toutes les propriétés de flex et est encore auto.

Paramètre explicite height: 100% rend officiellement possible de calculer le pourcentage de la hauteur de l'enfant, tout comme la mise en height: 100% à html permet de calculer le pourcentage de la hauteur de body dans CSS2.1.
- Exactement! Pour mettre cela en pratique, il suffit d'ajouter height:100% à .flex-2. Voici le jsfiddle.
- Google Chrome, le comportement est plus compatible avec Chrome Équipe de l'interprétation de l' le CSS. Alors qu'il pourrait être interprété de cette façon, il y a de bien meilleures façons de l'interpréter, de tout ce qui ne serait pas pris au piège de nous dans ce bazar, ennuyeux, et de comportements dérangeants. Ils devraient avoir réfléchi plus.
- c'était plus qu'il y a un an, mais je crois que j'ai dû recourir à hauteur fixe-éléments. Je souhaite que ces navigateurs obtenir leur acte ensemble. Je commence vraiment à détester l'espace mobile.
- La fixation d'un enfant d'une verticale flexbox conteneur à height: 100% donne de très étrange résultats pour moi sur Chrome. Il semble que cela provoque la "hauteur spécifiée" doit être défini à la hauteur totale du conteneur, plutôt que de la hauteur de l'élément lui-même, de sorte que les causes indésirable de défilement lorsque d'autres éléments ont des tailles calculées par rapport à elle.
InformationsquelleAutor Ilya Streltsyn
9

J'ai trouvé la solution par moi-même, supposons que vous avez le CSS ci-dessous:
```
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}
```
Dans ce cas, le réglage de la hauteur de 100% ne fonctionnera pas, donc ce que je fais est le réglage de la margin-bottom règle de auto, comme:
```
.child {
  margin-bottom: auto;
}
```
et l'enfant sera aligné à la supérieure de la maison mère, vous pouvez également utiliser le align-self règle de toute façon, si vous préférez.
```
.child {
  align-self: flex-start;
}
```
- Un hack sympa, mais le problème est: si l'enfant est une barre latérale et ont une couleur d'arrière-plan, la marge est encore blanc.
InformationsquelleAutor user3896501
4

Une idée serait que display:flex; avec flex-direction: row; de remplissage est container div avec .flex-1 et .flex-2, mais cela ne signifie pas que .flex-2 a un défaut height:100%; même si elle est étendue à toute la hauteur et d'avoir un enfant de l'élément (.flex-2-child) avec height:100%; vous aurez besoin de mettre de la mère à height:100%; ou de l'utilisation display:flex; avec flex-direction: row; sur le .flex-2 div trop.

De ce que je sais display:flex ne s'étend pas à toutes vos éléments d'enfant à hauteur de 100%.

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

InformationsquelleAutor rmagnum2002

html

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

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/

InformationsquelleAutor Carol McKay

-4

.conteneur {
. . . .
alignez-les éléments: extensible;
. . . .
}
- Bienvenue sur stackoverflow. Vous devez expliquer votre réponse, et ce qu'il apporte, c'est différent de l'actuel, des réponses. Voir stackoverflow.com/help/how-to-answer
InformationsquelleAutor HRK
-10

C'est ma solution à l'aide css+

Tout d'abord si le premier enfant (flex-1) doit être 100px ne devrait pas être flexible.
Dans css+ en fait, vous pouvez définir flexibles et/ou des éléments statiques (lignes ou colonnes) et par votre exemple, devenir aussi facile que cela:
```
<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>
```
conteneur css:
```
.container {
    height: 200px;
    width: 500px;
    position:relative;
}
```
et comprend évidemment css+ 0.2 core

entendre le violon

InformationsquelleAutor Marco Allori

Vous devez vous connecter pour publier un commentaire.