Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE 11: Image doesn't scale down correctly within flexbox

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 the width 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:

like image 272
yifei3212 Avatar asked Feb 11 '17 06:02

yifei3212


People also ask

How do I resize an image in Flexbox?

You can easily shrink an image by using the flex-wrap property in CSS and it specifies whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked.

Does IE 11 support Flexbox?

Note also that Internet Explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation.


1 Answers

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>
like image 112
andreas Avatar answered Nov 09 '22 05:11

andreas