flexbox vertically split container in HALF
<p>Can anyone tell how can I make <strong>right top</strong> container and <strong>right bottom</strong> 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 <code>flex-direction: row</code> to keep same height for items but I'm lost. </p>

<p>What I expect: <strong>right top</strong> container grows the same height as <strong>right bottom</strong> which also results the <strong>left</strong> container growing automatically of course.
<a href="https://i.stack.imgur.com/Mdwrg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Mdwrg.png" alt="problem"></a></p>

<p>This is what I have so far: <a href="http://jsbin.com/rozoxoneki/edit?html,css,output" rel="noreferrer">http://jsbin.com/rozoxoneki/edit?html,css,output</a></p>

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

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

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


&lt;div class="flex"&gt;
  &lt;div class="flex-child"&gt;
    left
  &lt;/div&gt;
  &lt;div class="flex-child flex flex--vertical"&gt;
    &lt;div class="flex-child"&gt;
      &lt;h1&gt;right top&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="flex-child"&gt;
      &lt;h1&gt;right bottom&lt;/h1&gt;
      &lt;p&gt;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?&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>