Flexbox has this behaviour where it stretches images to their natural height. In other words, if I have a flexbox container with a child image, and I resize the width of that image, the height doesn't resize at all and the image gets stretched.
div { display: flex; flex-wrap: wrap;}img { width: 50%}<div><img src="https://i.imgur.com/KAthy7g.jpg"><h1>Heading</h1><p>Paragraph</p></div>What causes this?