title: Flex container with two columns; second column has four rows
body: <p>I am having difficulty displaying the following layout in flex. I have 5 boxes and I want to divide my container in two, displaying one box vertically and the other 4 vertically. </p>
  
  <p><img src="https://i.imgur.com/mtEq0Hh.png" /></p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>.trades, .trade-panel {
      flex: 1;
   }
  .layout-4-5 {
      flex-direction: column;
  }
  .layout-4-5 &gt; div {
      width: 50%;
  }
  </code></pre>
  
  <p>Then I set the basis of the fourth or last child to 100%.</p>
  
  <pre><code>.layout-4-5 &gt; div:nth-child(1) {
      flex-basis: 100%;
  }
  </code></pre>
  
  <p>And here's my HTML</p>
  
  <pre><code>&lt;div class="trades layout-4-5"&gt;
    &lt;!--trade-panel are my individual boxes ---&gt;
    &lt;div class="trade-panel"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Above print my layout horizontally. Considering My <code>flex-direction</code> is <code>column</code> and my first child or box has a 100% basis, shouldn't that print what I want? Please any help would be appreciated.</p>
  
  <p>Note: Since the boxes are of equal size, the column containing the four other boxes should be longer, provided they are in the arrangement above, its ok. tq</p>