title: Flexbox equal height white space issue
body: <p>I have a problem with flexbox. When I create equal columns with flex and some of the columns have larger height, then child div with image will get some white space and I don't know where this is coming from.</p>
  
  <p>As you can see from my code the red background in <code>.card-thumb</code> there is wrong height. So how to fix that?</p>
  
  <p>Here is my pen: <a href="http://codepen.io/woosaj/pen/bZjyRP" rel="nofollow">http://codepen.io/woosaj/pen/bZjyRP</a></p>
  
  <pre><code>.container {
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      flex-flow: row wrap;
      background: rgba(2552,255,255,.1)
  }
  
  .column {
      display: flex;
      flex: 0 0 33.33333%;
      padding-left: 0.3125rem;
      padding-right: 0.3125rem;
      max-width: 33.33333%;
  
  }
  
  .card {
      background: #fff;
      display: flex;
      flex-flow: row wrap;
      .card-thumb {
          width: 100%;
          background: red;
      }
  
  }
  
  img {
      max-width: 100%;
      display: block;
  }
  </code></pre>