title: chrome doesn't respect image aspect ratio in flexbox
body: <p>Flexboxes make it easy to make layouts that grow and shrink intelligently based on available space.  I was using this feature to draw two images that each take up half of the width of the screen.  In Firefox, the images render as expected and maintain their aspect ratio but in Chrome the images are horizontally squashed to 50% each and left at their full height vertically.</p>
  
  <p>Here's a demo of what I'm talking about:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flexbox {
    width: 100%;
    display: flex;
  }
  img {
    width: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flexbox"&gt;
    &lt;img src="http://res1.windows.microsoft.com/resbox/en/windows/main/2b03b0c4-85f7-4c28-9c60-1c7af2a62fa8_5.jpg" /&gt;
    &lt;img src="http://res1.windows.microsoft.com/resbox/en/windows/main/b89eff70-398d-4b1b-8806-02458a185c5a_5.jpg" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've read in <a href="https://stackoverflow.com/questions/30081412/css-flexbox-images-not-preserving-aspect-ratio">an answer to a similar question</a> that this is a Chrome bug.  How can I cleanly work around it?</p>
  
  <p>Thanks</p>