CSS Flexbox - How to make child elements use the remaining vertical space

Question

I have a flex layout like below :

And as I described in the title, I'm trying to achieve this kind of result:

Here is the codepen

I've tried setting flex-direction to column but it doesn't work.

flex-direction: column;
flex-wrap: wrap;