IE 11: Image doesn't scale down correctly within flexbox
20,436
IE11 seems to have some trouble with the initial value of the flex-shrink
property. If you set it to zero (it is initially set to 1), it should work:
div.outer {
width: 400px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
div.inner {
flex-shrink: 0;
width: 100%;
border: 1px solid red;
}
img {
width: 100%;
height: auto;
}
<div class="outer">
<div class="inner">
<img src="http://placehold.it/480x360">
</div>
<div class="inner">
<img src="http://placehold.it/480x360">
</div>
</div>
Comments
-
yifei3212 almost 2 years
I'm trying to use flexbox to place two images in a column. In this case, the
width
of the div container is smaller than thewidth
of the image. In Chrome the image perfectly fits into the div container, but it doesn't in IE, and I don't know why.div.outer { width: 400px; display: flex; flex-direction: column; justify-content: space-around; } div.inner { width: 100%; border: 1px solid red; } img { width: 100%; height: auto; }
<div class="outer"> <div class="inner"> <img src="http://placehold.it/480x360"> </div> <div class="inner"> <img src="http://placehold.it/480x360"> </div> </div>
https://jsfiddle.net/Yifei/16cpckqk/
This is what I've got in IE 11: