Estou tentando preencher o espaço vertical de um item flexível dentro de um 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>
E aqui está o JSFiddle
flex-2-child
não preenche a altura necessária, exceto nos dois casos em que:
flex-2
tem uma altura de 100% (o que é estranho, porque um item flexível tem 100% por padrão + é defeituoso no Chrome)flex-2-child
tem uma posição absoluta que também é inconveniente
No momento, isso não funciona no Chrome ou Firefox.
height:100%
mas eles são renderizados com altura natural. E o mais estranho é que se eu mudar a altura deles auto
, eles se renderão height:100%
como se eu estivesse tentando fazer. Definitivamente, não é intuitivo se é assim que deve funcionar.