J'essaie de remplir l'espace vertical d'un élément flexible à l'intérieur d'une Flexbox.
.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;
}
<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
ne remplit pas la hauteur requise sauf dans les deux cas où:
flex-2
a une hauteur de 100% (ce qui est bizarre car un élément flexible a 100% par défaut + il est buggé dans Chrome)flex-2-child
a une position absolue qui est également gênante
Cela ne fonctionne pas actuellement dans Chrome ou Firefox.
height:100%
mais qui sont rendus à la hauteur naturelle à la place. Et le plus étrange, c'est que si je change leur hauteur en auto
, ils restituent comme height:100%
j'essayais de le faire. Ce n'est certainement pas intuitif si c'est ainsi que cela devrait fonctionner.