My goal is to create a two-column layout with flexbox wherein the first column has two rows and the second column has one, like this:
Setting flex-basis: 100% on the third item gives the desired effect, but only when the container's flex-direction is row:
Changing flex-direction to column results in the following, unless the height is set explicitly, which is infeasible in my project:
How can I get the first image without explicitly setting the height of the container?
Here's a Plunker illustrating the problem.
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>