One flex item above two flex items on equal width rows

Question

Above is the layout I'm trying to achieve. I know how to achieve this with flexbox on the two separate colors, blue and red but is it possible to achieve this with just flexbox on the parent container?

My fiddle: https://jsfiddle.net/jzhang172/ux0h69kw/

 .container{ display:flex; justify-content:center; align-items:stretch; width:100%; flex-direction:column; } .one{ height:300px; width:100%; background:blue; } .two{ width:50%; height:300px; background:red; } *{ margin:0px; padding:0px; } 

 <div class="container"> <div class="one"> </div> <div class="two"></div> <div class="two"></div> </div> 

Answer 1

Use a multiline row layout instead of a column:

.container {
  flex-flow: row wrap;
}

 * { margin: 0px; padding: 0px; } .container { display: flex; flex-wrap: wrap; } .one { height: 300px; width: 100%; background: blue; } .two { height: 300px; width: 50%; background: red; } 

 <div class="container"> <div class="one"></div> <div class="two"></div> <div class="two"></div> </div> 

Once browsers start supporting forced breaks in flexbox, you won't need the widths.

 * { margin: 0px; padding: 0px; } .container { display: flex; flex-wrap: wrap; } .one, .two { height: 300px; flex: 1; } .one { background: blue; page-break-after: always; /* CSS 2.1 syntax */ break-after: always; /* New syntax */ } .two { background: red; } 

 <div class="container"> <div class="one"></div> <div class="two"></div> <div class="two"></div> </div> 

Answer 2

This is all you need, it appears:

.container {
    display: flex;
    flex-direction: column;
}

.one {
    flex: 0 0 300px;
    background: blue;
}

.two {
    flex: 0 0 150px;
    background: red;
}

Revised Demo