Flex-wrap does not wrap items in IE11

Question

I use a flexbox container that includes two divs of equal width. The left displays an image and the right some text. The code wraps the items for Google Chrome but in Internet Explorer 11, it moves the right part on top of the left. How could I fix this? I tried to use flex: auto on both children, as well as flex-grow: 1, flex-shrink: 1 and flex-basis: 0 / flex-basis: auto. I also tried to add px or % to 0 but they all give the same results...

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
}

.d1 .text {
  flex: 1;
  padding: 2%;
}

<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

it's partial support in Internet Explorer 11 .. plz check the link : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap — نور, Aug 03 '20 at 18:10
no need of all those prefix (even IE11) try : `.d1 { display: flex; flex-wrap: wrap; padding: 4%; } .image-container { align-items: center; display: flex; flex: 1 0 auto; justify-content: center; } .d1 .text { flex: 1; padding: 2%; }` and see : https://stackoverflow.com/questions/36822370/flexbox-on-ie11-image-stretched-for-no-reason/36828291#36828291 only about the default flex-shrink value within IE11 supposed to be 0 but which seems not to be untill reset. A jsbin to test IE11 the code fixed — G-Cyrillus, Aug 03 '20 at 18:17
to mind a min width for the text, you can do https://jsbin.com/hozatugece/1/edit?html,css,output or use min-width. — G-Cyrillus, Aug 03 '20 at 18:23
`flex: 1 0 auto` on the first child and `flex: 1` on the second seems to work but now I am facing one last problem: the image does not scale down even if I use `img {max-height: 100%; max-width: 100%;}` — darkchampionz, Aug 03 '20 at 18:30
because the img itself gives a size to its container . flex is for flexible and basicly uses content to size its element. So your asking img to size its container and also be sized from it ;) . give a try to : https://jsbin.com/vewuzepuci/1/edit?html,css,output if that helps you find your compromise . — G-Cyrillus, Aug 03 '20 at 19:37
I'm in favor of Michael's answer. The issue is due to the image doesn't scale down and the text is wrapping `image-container`. You can also only add `img { width: 100%; height: auto; max-width: 250px; }` so that the text will wrap the image and the image will scale down in IE. — Yu Zhou, Aug 04 '20 at 03:14

score 3 · Answer 1 · answered Aug 04 '20 at 00:00

Add flex: auto to the first child.

For image scaling, add img { width: 100%; height: auto; }

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: auto; /* adjustment */
  justify-content: center;
  max-width: 250px; /* optional; limits image size */
}


/* image scaling */
img {
  width: 100%;
  height: auto;
}

.d1 .text {
  flex: 1;
  padding: 2%;
}

<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

The code seems to work good but I can't make the image always stay below its original size. If I add `max-width: 300px` under `.image-container` then, on a full screen, the left and right parts are not of the same width... — darkchampionz, Aug 04 '20 at 21:07

Yu Zhou · Accepted Answer · 2020-08-07T02:12:07.113

3

You could refer to this code sample. The image is original size at first and the left and right parts are of the same width. It works well in IE 11 :

.d1 {
  display: flex;
  flex-wrap: wrap;
  padding: 4%;
}

.image-container {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 200px;
}

.d1 .text {
  flex: 1;
  padding: 2%;
}

/* adjustment */
img {
  width: 100%;
  height: auto;
  max-width: 300px;
}

<div class="d1">
  <div class="image-container">
    <img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Result in IE:

edited Aug 07 '20 at 02:12

answered Aug 05 '20 at 01:38

Yu Zhou

11,532
1
8
22

But this way the flexbox never wraps, the right part has its text appear overflow... – darkchampionz Aug 05 '20 at 18:58
I think it wraps. The result of this demo is the same as your code sample result in Chrome. – Yu Zhou Aug 06 '20 at 10:03
I test and I think putting the `min-width` in `.image-container` is enough. The text wraps when the browser viewport is large enough to contain the image's `min-width` and the text width. And the text comes into the bottom when the viewport is smaller than the image's `min-width` plus the text width. I'm a little confused about the "overflow" you said. If this doesn't meet your demands, please explain more about what result you want to achieve. Thanks for your understanding. – Yu Zhou Aug 07 '20 at 02:26
Thanks for your time and help, I accepted your answer. In my IE browser, it has different results though... I deleted my previous reply to clear it up a bit. Firstly, I am trying to make the right part of the text wrap when it can't break a word anymore, just like your test. But it doesn't work for me: https://gyazo.com/10f6756db0e172a21fef5d4360668bd6 – darkchampionz Aug 07 '20 at 09:00
Thanks for accepting the answer. From your screenshot, I find that your image's `min-width` is smaller than mine. I set `min-width: 200px;` in `.image-container`. Are you setting it to a smaller value than mine? – Yu Zhou Aug 07 '20 at 09:39
I added that property too but the results are the same, it only wraps if the width of `.text` gets very narrow: https://gyazo.com/e8ace0aab14288312b9e588e1990eed5 – darkchampionz Aug 07 '20 at 16:10

Flex-wrap does not wrap items in IE11

2 Answers2