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?

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

.container section:first-child {
  display: flex;
  margin-bottom: 25px;
}

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

<div class="container">
  <section>
    <img src="https://via.placeholder.com/250">
  </section>
  <section>
    <img src="https://via.placeholder.com/150">
  </section>
</div>

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.

Selfassured

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

Torpor

Thanks for verifying and providing an explanation! Seems like Safari is quickly becoming the new IE. – Selfassured

Does Safari track this issue? If yes, it would be great to add a link. – Intercollegiate

Thank you for this! Does applying align-items: flex-start; permanently without caring about the flex-direction cause any problem if the flex-direction changes? – Fructify

Sounds like the fix in WebKit has been merged in late 2020: bugs.webkit.org/show_bug.cgi?id=209983 – Parttime

@Parttime unfortunately this bug still persists as of 2021-05-21. Using align-self: flex-start is a nice way of getting around it. – Trilobite

Thank you align-items: flex-start; worked for me :) – Donella

Answer 2

Adding height: intrinsic; works for me to fix the stretched height in safari. Add it to the image itself. Not the wrapper. You will still need height: auto for the other browsers.

Pablopabon

This helped me too, and it seems to be the least intrusive option. – Calcium

Same here, this one's the ticket! – Felspar

Whoa, this is a very weird behavior. Good luck finding that on your own 😨 Thanks @Kerry Murphy – Photothermic

Answer 3

For me neither of the solutions worked. I already had both flex-direction: column and align-items: center, although, in my case, I also had some other elements in the same flex container, alongside the image. Not sure if it had any impact.

What actually fixed the issue in my case was simply wrapping the image with a div:

<section>
    <div>
        <img src="https://via.placeholder.com/250">
    </div>
</section>

Imine

As well as setting the img's width to 100%. – Supernova

This solution fixed the problem for me either. – Matron

Answer 4

See my demo for a working example, add flex-direction: column; to fix this issue.

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

.container section:first-child {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

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

<div class="container">
  <section>
    <img src="https://via.placeholder.com/250">
  </section>
  <section>
    <img src="https://via.placeholder.com/150">
  </section>
</div>

Kimberliekimberlin

I noticed adding flex-direction: column; fixes the issue as well but to me this shouldn't be needed. Could you explain why this needed? Or is this just a workaround for a Safari bug? – Selfassured

For Bootstrap 4 you could add class="flex-column flex-md-row" to restore it to horizontal on devices larger than a phone, but still get the fix in for iphones.. – Canebrake

Answer 5

if parent <img/> tag has display:flex; add align-items: center;

<div style="display:flex;align-items: center;">
    <img "img.jpg"/>
</div>

Cerecloth

Answer 6

For anyone looking over this post in the future: I had this problem with a fixed height flex-direction:row flexbox and images inside of flex-children with height:100%. The highest-voted solution wasn't enough to fix it.

For whatever reason, what ultimately fixed it in my case was adding display:block directly to the images.

Eldoneldora