Flexbox on IE11: image stretched for no reason? - html

Question

I'm having an issue with flexbox on IE11 and while I'm aware there's lots of known issue, I haven't been able to find a solution...
<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>BLAH</p>
</div>
</article>
</div>
And the CSS...
img {
max-width: 100%;
}
.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-content {
padding: 20px 35px;
}
Images are getting stretched within a flex container.
Applying align-items: flex-start (I figured, since "stretched" is the default value...) or justify-content: flex-start doesn't seem to work.
Codepen: example of what I mean
What am I doing wrong?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

I tried every solution here but nothing worked. The only thing I was using flexbox for was to vertically center an image shown when hovering another image. So I just used a more classic solution à la top: 50%; transform: translateY(-50%) and then it was ok. So essentially not using flexbox at all then.. #hateIE

Answer 6

I had an issue with stretched product images in IE11, and I did some research and tried different things.
This was my code:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
height: 100%;
object-fit: contain;
top: 0;
}
}
I then realized that my image height: 100% was the culprit of the stretched image, and I simply removed my height, but then my image was at the top of my .productImage container instead of being centered vertically. I introduced flex here and positioned it through a simple align-items: center, but this of course didn't work in IE11. I also tried the flex-shrink: 0 but that didn't work either.
I then went ahead to skip using flex and tried the classic top: 50%; left: 50%; transform: translate(-50%, -50%); but this wasn't good either since I already had a transform in use for my zoom on hover effect on the image.
I ended up with this solution instead:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
It worked like a charm