Why does width and height of a flex item affect how a flex item is rendered?

An image in a flexbox that has a max-height style appears to render differently depending on whether it has its height and width attributes set.

The one with the attributes, set to the true width/height of the image, renders with its aspect ratio preserved, but the ones without the attributes respects the max-height and appear squashed.

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img                          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

This is how is appears in Chrome 58 (and it appears similarly in Firefox 54).

Why do they render differently? What are the rules that govern this behaviour?

My (obviously incorrect) understanding is that height and width attributes overwrite the intrinsic height and width that is found when the image loads, and if the height and width attributes equal the dimensions of the image, there should be no difference in rendering once the image has loaded.

The context is making a page with responsive images, where each image

• can have unique original dimensions
• does not cause a reflow when it's loaded, i.e. the correct space is reserved on initial render (hence using height and width attributes)
• can fit all on screen at once (hence me messing with vh in the CSS)

The frog image is from https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg