flexbox vertically split container in HALF

Question

Can anyone tell how can I make right top container and right bottom container to have the same height and to split the red container 50-50% vertically. No matter what is the content inside. I tried stretching content and have them wrapped while keeping flex-direction: row to keep same height for items but I'm lost.

What I expect: right top container grows the same height as right bottom which also results the left container growing automatically of course.

This is what I have so far: http://jsbin.com/rozoxoneki/edit?html,css,output

.flex{
  display: flex;
  border: 5px solid red;
  &-child{
    background: green;
    border: 2px solid yellow;
    flex: 1;
  }
}

.flex--vertical{
  flex-direction: row;
  flex-wrap: wrap;

  > .flex-child{
    min-width: 100%;
  }
}


<div class="flex">
  <div class="flex-child">
    left
  </div>
  <div class="flex-child flex flex--vertical">
    <div class="flex-child">
      <h1>right top</h1>
    </div>
    <div class="flex-child">
      <h1>right bottom</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
    </div>
  </div>
</div>

Answer 1

Intuitively one would expect that this would work just with a flex-direction: column for the main container and the left container's height set to 100%.

Instead all browser do this: (this is a quote from another stackoverflow question)

How is it possible that all major browsers got the flex container to expand on wrap in row-direction but not in column-direction?

So what you can do is wrap the two right containers into a new one:

Like this HTML - schema:

<div class="main-container">
    <div class="left-container">Left container</div>
    <div class="right-container">
        <div class="half-containers">Top right</div>
        <div class="half-containers">Bottom right</div>
    </div>
</div>

Here is a jsfiddle as an example how you could style it for the expected result.

In this example the 'main-container' is set to 50% width and 75% height of the body.

Answer 2

The accepted answer is not ideal for the use of flex properties, because it can all be done without the need for min-height or max-height

I've cleaned up the example fiddle and removed non-essential css styles to show which flex properties are being used here.

In order to get evenly spaced top/bottom divs, you need to either specify the proper value for flex-basis, or let flex work itself out. Assuming that the parent's display is set to flex with a column orientation, the combined flex style can get us there easily:

.half-containers {
    flex: 1;
}

see more on flex styling and the flex-basis property