Warum dehnt die Flexbox mein Bild?

Flexbox weist dieses Verhalten auf, bei dem Bilder auf ihre natürliche Höhe gedehnt werden. Mit anderen (genaueren) Worten: Wenn ich einen Flexbox-Container mit einem untergeordneten Bild habe und die Breite dieses Bildes verändere, ändert sich die Höhe überhaupt nicht und das Bild wird gestreckt.

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

Und dieses Stylesheet

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

Ich fügte hinzuDieser Codepen um zu demonstrieren, was ich meine. Wodurch wird das verursacht?