Forcing a wrap on column flex box layout

This question already has an answer here:

  • Can flex items wrap in a container with dynamic height?

    2 answers
  • in flexbox how to push next row element close to right top element of previous row, without negative margins?

    1 answer
  • Line break in multi-line flexbox

    3 answers

Please see the example attached.

i need the following:

  • have a column layout. flex-direction:column;
  • have a wrap break-point after child 2.
  • all childs must be directly descendant of parent container.

Currently i can achieve this by specifying explicit height to the container. for example: height:100px.

however, i don’t want to do this. i want the second child take as height as it needs to have (by the content), and the third child to follow on the second column.