Image stretching in flexbox in Safari

Question

This is only an issue in Safari and looks like a Safari bug to me. Here is a fiddle with a simplified version of the issue.

When an image is in a nested flexbox element with a width set and height: auto it is being stretched... the auto height is not working. Does something extra need to be added for this to work in Safari?

I expect the height of the image to automatically be adjusted to maintain aspect ratio. This works in all browsers except Safari. In Safari the image is stretched and the auto height does not work.

Answer 1

It certainly appears to be a bug.

The default setting for the align-items property is stretch. Most major browsers handle this sensibly, stretching the image within the confines of the container.

For whatever reason, Safari stretches the image to its natural height, taking the container along for the ride.

---

flex-direction: row

To fix the problem, override the stretch default value with flex-start in the align-items property.

.container {
  display: flex;
  flex-direction: column;
}
.container section:first-child {
  display: flex;
  align-items: flex-start; /* new */
  margin-bottom: 25px;
}
.container img {
  width: 125px;
  height: auto;
}

<div class="container">
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
</div>

jsFiddle demo

---

flex-direction: column

Switching the direction of the flex container to column also fixes the problem. This works because align-items now applies to width and you've defined a width on the image.

If you reverse the image dimensions from

.container img {
   width: 125px;
   height: auto;
}

to

.container img {
   width: auto;
   height: 125px;
}

... you'll have the same problem in Safari as in flex-direction: row, and need align-items: flex-start for the correction.

.container {
  display: flex;
  flex-direction: column;
}

.container section:first-child {
  display: flex;
  /* align-items: flex-start; */
  margin-bottom: 25px;
}

.container img {
  width: auto;
  height: 125px;
}

<div class="container">
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
  <section>
    <img src="http://i.imgur.com/60PVLis.png">
  </section>
</div>

jsFiddle demo