chrome doesn't respect image aspect ratio in flexbox

Question

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.

Here's a demo of what I'm talking about:

.flexbox {
  width: 100%;
  display: flex;
}
img {
  width: 50%;
}

<div class="flexbox">
  <img src="http://res1.windows.microsoft.com/resbox/en/windows/main/2b03b0c4-85f7-4c28-9c60-1c7af2a62fa8_5.jpg" />
  <img src="http://res1.windows.microsoft.com/resbox/en/windows/main/b89eff70-398d-4b1b-8806-02458a185c5a_5.jpg" />
</div>

I've read in an answer to a similar question that this is a Chrome bug. How can I cleanly work around it?

Thanks

Answer 1

The items in a flexbox will stretch their size by default. Seeing you want them to not stretch on the cross-axis (vertical), you can use the align-items on the container, to change the default behaviour.

Fiddle: http://jsfiddle.net/g1vLff23/

CSS

.flexbox {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
img {
  width: 50%;
}

Answer 2

Apply object-fit: scale-down; to the images. Yes, adding height: auto; does not do the trick, unfortunately. Similar issue solved here: max-width of img inside flexbox doesn't preserve aspect ratio