title: Flexbox divs resized by image
body: <p><a href="http://codepen.io/mastastealth/full/DfcnI" rel="nofollow">Example page</a></p>
  
  <p>Firefox/IE10/Opera, upong shrinking the window, maintain the images at the current size, no scaling done at all.</p>
  
  <p>Chrome is the only one that will shrink everything down proportionally as I'd like. I can't tell if Chrome is doing something wrong, or all the other browsers are, or how to go about fixing it.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section&gt;
  &lt;div class="card"&gt;&lt;img src="http://placehold.it/120x200" alt="" /&gt;&lt;/div&gt;
  &lt;div class="card"&gt;&lt;img src="http://placehold.it/120x200" alt="" /&gt;&lt;/div&gt;
  &lt;div class="card"&gt;&lt;img src="http://placehold.it/120x200" alt="" /&gt;&lt;/div&gt;
  &lt;div class="card"&gt;&lt;img src="http://placehold.it/120x200" alt="" /&gt;&lt;/div&gt;
  &lt;div class="card"&gt;&lt;img src="http://placehold.it/120x200" alt="" /&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
  }
  
  .card {
    margin: 0 5px;
    position: relative;
  }
  .card img {
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    display: block;
    max-height: 100%;
    max-width: 100%;
  }
  </code></pre>