title: How do I make flex items fit the height of two rows?
body: <p>I am trying to make a special  in a row of flexboxes stretch to be the height of two rows. Here is what I am trying to achieve:
  <a href="https://i.stack.imgur.com/TPM0m.png" rel="nofollow noreferrer">What I want</a>. But here is my current result: <a href="https://i.stack.imgur.com/4JpgO.png" rel="nofollow noreferrer">Result</a>.</p>
  
  <p>I think I have to use <code>flex-wrap: wrap;</code>, but I am not sure. I don't want to do <code>flex-direction: column;</code>, because then I cannot stretch the divs at the top like if they were aligned in a row. I want all the children divs to be part of the same flex container. Does anyone have any ideas?</p>
  
  <p><em>Note : I found <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container" rel="nofollow noreferrer">this</a>, where I was able to create <a href="https://i.stack.imgur.com/8xOxN.png" rel="nofollow noreferrer">this</a>. If somehow I can move the Three up to be next to the Two, I may be able to achieve what I want. Not sure how to do this.</em></p>
  
  <p>Here is my code I am using:</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>.flex-row {
    display: flex;
    flex: 1;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .flex-col {
    margin: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-row"&gt;
    &lt;div class="flex-col"&gt;
      &lt;p&gt;This box has little text.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="flex-col"&gt;
      &lt;p&gt;This box is diffrent than small. It has a middleish amout of text.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="flex-col"&gt;
      &lt;p&gt;This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="flex-col"&gt;
      &lt;p&gt;This box has little text.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="flex-col"&gt;
      &lt;p&gt;This box is diffrent than small. It has a middleish amout of text.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you.</p>