Flexbox on IE11: image stretched for no reason?

in my case combination of "flex-shrink: 0" suggested by G-Cyr and "align-self: flex-begin" suggested by Rick Schoonbeek did the trick. I had a wrapper which was using flex box to center the image with a "justify-content: center;"

All was good in IE 11, Chrome, Safari except IE Edge was not able to display correctly. adding the two attributes on image resolved the problem with IE Edge.

I had a similar bug in IE11. The styles were taken from Bootstrap 4.1, so for the fluid images I had:

.img-fluid {
    border: none;
    height: auto;
    max-width: 100%;
}

In my case it appeared that the reason was in max-width: 100% so when I changed it to width: 100% the bug disappeared:

.img-fluid {
    border: none;
    height: auto;
    width: 100%;
}

This solution is not for everyone's case but I hope it would be helpful.

to avoid this funny behavior, you may reset the flex-shrink property.

This looks like a bug, despite what Microsoft says:

<'flex-shrink'>

Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.

If omitted, the element's negative flexibility is "0". A negative value is not valid.

Source: https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx

img {
      max-width: 100%;
      flex-shrink: 0;
    }

img {
  max-width: 100%;
  flex-shrink: 0;
}

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
article.post-grid .article-content {
  padding: 20px 35px;
}

<div class="latest-posts">
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>THIS IS POST TITLE</h2>
      <p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
      <p>Recommend new contented intention improving bed performed age.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>SHORT TITLE</h2>
      <p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
    </div>
  </article>
</div>

http://codepen.io/anon/pen/KzBOvq

I had image stretch on the cross-axis (stretch in height, using flex-direction: row).

This Stack Overflow Q/A helped me solve it:

Link here

I had to set the following CSS on my img:

align-self: flex-start;

You might need another value than flex-start of course, depending on your goal. Mine is to have my image be at the top of the row.