Base flexível de CSS não funciona quando flex-direction é 'column'
Meu objetivo é criar um layout de duas colunas com o flexbox, em que a primeira coluna tem duas linhas e a segunda coluna tem uma, como esta:
Configuraçãoflex-basis: 100% no terceiro item dá o efeito desejado, mas somente quando o contêinerflex-direction érow:
Mudandoflex-direction paracolumn resulta no seguinte, a menos que oheight é definido explicitamente, o que é inviável no meu projeto:
Como posso obter a primeira imagem sem definir explicitamente oheight do recipiente?
Aqui está um Plunker ilustrando o problema.
body {
display: flex;
height: 100px;
width: 100px;
}
.container {
display: flex;
flex-direction: column; /* Setting this to `row` gives the expected effect,but rotated */
flex-grow: 1;
flex-wrap: wrap;
/* height: 100%; */ /* Setting this fixes the problem, but is infeasible for my project*/
}
.item {
flex-grow: 1;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
flex-basis: 100%;
}<div class="container">
<div class="item one"> </div>
<div class="item two"> </div>
<div class="item three"> </div>
</div>