title: CSS Flex row direction with 50% column stretch
body: <p>I'm trying to learn how CSS flex works. I want to create a full-width and full-height panel with some blocks (items). I don't understand how do I create 2 vertical items with 50% height each when flex-direction is row (pink and yellow blocks on images).</p>
  
  <p>Here is my goal:</p>
  
  <p><a href="https://i.stack.imgur.com/84yK3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/84yK3.png" alt="flex layout goal"></a></p>
  
  <p>Here is what I got for now:</p>
  
  <p><a href="https://i.stack.imgur.com/Z7cc4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z7cc4.png" alt="flex layout I make"></a></p>
  
  <p>And here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body {
        min-height: 100vh;
      }
  
      .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 5px;
      }
  
      .container .item
      {    
         margin: 10px;
      }
  
      .item.blue {
        flex: 0 1 80%;
        background: blue;
      }
  
      .item.green {
        flex: 0 1 auto;
        background: green;
      }
  
      .item.red {
          flex: 0 1 60%;
          background: red;
      }
  
      .item.pink {
        flex: 1 0 auto;
        background: pink;
        align-self: stretch;
      }
  
      .item.orange{
        flex: 0 1 60%;
        background: orange;
      }
  
      .item.yellow {
        flex: 1 0 auto;
        align-self: center;
        background: yellow;
      }
  
      .item.purple{
        flex: 1 0 auto;
        background: purple;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container"&gt;
      &lt;div class="item blue"&gt;
          blue
      &lt;/div&gt;
      &lt;div class="item green"&gt;
          green
      &lt;/div&gt;
      &lt;div class="item red"&gt;
          red
      &lt;/div&gt;
      &lt;div class="item pink"&gt;
          pink
      &lt;/div&gt;
      &lt;div class="item orange"&gt;
          orange
      &lt;/div&gt;
      &lt;div class="item yellow"&gt;
          yellow
      &lt;/div&gt;
      &lt;div class="item purple"&gt;
          purple
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>