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?
align-self:flex-start
in the image. I don't know why, maybe the default value in chrome is stretch.align-items: stretch
/align-self: stretch
. If you add a border around each item and removewrap
, you'll notice all items stretch in all browsers: codepen.io/anon/pen/oLXBVx?editors=1100