Flexbox: 3 divs, 2 columns

Question

I am new to flexbox, so please bear with me. My html:

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

With flexbox, I am trying to execute the following layout:

.

In what simple way can I achieve this without setting height for the container? .one is expected to change in height.

Answer 1

This can be done by setting flex-direction to column .

As requested, the width of the second div is static. I use calc for the remaining 2 divs.

 .container { display: flex; flex-wrap: wrap; flex-direction: column; height: 100px; } .one, .three { flex: 0 0 50%; background: cyan; width: calc(100% - 100px); } .two { flex: 0 0 100%; order: 1; background: moccasin; width: 100px; } .three { background: tomato; } 

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

Answer 2

EDIT ... Late answer, I leave it as the approach looks a little different from the other, even if it seems very similar to me .. but there is not much choice about how flex works :)

you may need to set the parent container and child elements of height in the first column. order will organize the flow of containers.

codepen to test behavior and how it breaks when windows shrink or content grows

 .one { background: #A1EB88; } .two { background: #E7AAF6 } .three { background: #F7F467 } .container { display: flex; flex-direction: column; flex-wrap: wrap; height: 50vh;/* height is needed to force wrapping */ } .one, .three { order: -1;/* bring them in front of other(s) */ height: 50%;/* share the height (if three of them, then put it down to 33.33% to share evenly height avalaible) */ } .two { flex: 1;/* equals height:100%; it will fill entire height */ width: 200px;/* here your fixed width */ } 

 <h1>test it also in full page mode </h1> <div class="container"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> </div>