Flexbox items not displayed next to each other in IE11 and lower

Question

I've read (https://github.com/philipwalton/flexbugs) that there are still many bugs open for flexbox in IE11 and lower. Now I may have a problem that is probably not listed.

PROBLEM flex items are not displayed next to each other and do not respect the given flex-basis percentage.

My code: (with prefixes from autoprefixer dependency)

 .flex-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
 }

 .flex-item {
  -webkit-flex: 1 1 30%;
  -ms-flex: 1 1 30%;
  flex: 1 1 30%;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-flex-basis: 30%;
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
 }

HTML

<div class="flex-container">
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
  <div class="flex-item"> lorem stuff </div>
</div>

The above code is the basic of the basics and doesn't even work. Is there something going on with flexbox in IE11 apart from the above-mentioned bugs?

When I use my full code everything works fine in codepen on IE11. It makes me wonder...

Thanks in advance

Well according to Can I Use...: 1. FlexBox has a lot of bugs on IE11, 2. FlexBox uses the 2012 syntax on IE10, 3. FlexBox will not work at all on IE9 or lower. http://caniuse.com/#feat=flexbox Sounds like you may be experiencing [this bug](https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview). — James Donnelly, Feb 07 '17 at 16:23
You should post enough code for us to be able to reproduce the problem. — Michael Benjamin, Feb 07 '17 at 16:23
I've updated my question and as you see, it has nothing to do with min-height or any other known issue from can I use. — Sara Barrera Riano, Feb 07 '17 at 16:35
@Michael_B I am pretty sure that this isn't a duplicate question. I've read almost every StackOverflow question regarding the current and old flexbox issues — Sara Barrera Riano, Feb 07 '17 at 16:44
Your original IE image was captioned with *IE9 and lower*. Your question was then a clear duplicate. Now that you've revised the caption to *IE11 and lower*, it may not be a duplicate. I've re-opened. — Michael Benjamin, Feb 07 '17 at 16:47
@JosephMarikle Same here when I use codepen. When I reproduce my code in Codepen on IE11 it works fine... If I export the code from codepen and open it in IE11 again it doesn't work anymore — Sara Barrera Riano, Feb 07 '17 at 16:50
@SaraBarreraRiano I checked your code in a fiddle and it works fine for IE11. Where are you exporting your code too? Perhaps there are other elements on the page that are messing up the layout for IE? Maybe post more of your code? — crazymatt, Feb 07 '17 at 20:50

Flexbox items not displayed next to each other in IE11 and lower

0 Answers0