title: flexbox vertically split container in HALF
body: <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>