title: shrinking flexboxes to the same height of the shortest box
body: <p>I currently have a flexbox layout that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/6N1Hk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6N1Hk.png" alt="enter image description here"></a></p>
  
  <p>The blue is class = "wrap", the orange and all three yellow boxes are contained in two separate class = "wrap_col", and each yellow box is contained in class = "wrap_item".  </p>
  
  <pre><code>.wrap {
    display: flex;
    flex-flow: row wrap;
      margin: 0 auto;
  }
  
  .wrap_col {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  
  .wrap_item {
    margin:10px;
    display: flex;
    flex:1 0 auto;
    flex-direction: column; 
  }
  </code></pre>
  
  <p>How can I shrink the three yellow boxes' heights down so that it is the same height as the orange box?  Can you shrink flexboxes down to the same height as the shortest box?</p>
  
  <p><a href="https://i.stack.imgur.com/fgyjJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fgyjJ.png" alt="enter image description here"></a></p>