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.

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

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

For me neither of the solutions worked. I already had both flex-direction: column and aligh-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>

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>

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

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.