display: flex won't render properly in IE11

Question

I have this code:

.fbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  margin: 15px;
  border: 1px solid black;
  background-color: gray;
}

<div class="fbox">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

And instead of getting this:

I get this:

As far as it's stated on caniuse and other relevant sources, the display: flex and flex-direction: row should be supported by Internet Explorer 11.

The version I tested with is: IE 11.1.18343.0

Does anybody have idea why?

It looks fine in my IE browser. Are you sure you are using IE11? You can swap the version for testing — Marc Hjorth, Mar 11 '19 at 17:28
@MarcHjorth that's what the `About IE` says... so I guess it's lying. — andreihondrari, Mar 11 '19 at 17:28
It's true that I'm testing in windows 10, maybe they did something to it? I'm downloading another one from microsoft... let's see — andreihondrari, Mar 11 '19 at 17:30
add `-ms-flex-direction: row;` and check again, I guess box should have `flex with a value` — Rachid Rhafour, Mar 11 '19 at 17:31
Have you checked your compatibility mode? (press f12 and select compatibility mode or emulation on tabs) - this works fine in my ie11 on windows 10 — Pete, Mar 11 '19 at 17:33
@Pete Ok so that was it, basically Internet Explorer 11 in Windows 10, defaults in compatibility mode for IE 7... Write your answer and I will vote for it. — andreihondrari, Mar 11 '19 at 17:41
Note that IE may default to compatibility mode for localhost URLs, but certainly not for everything. See [here](https://stackoverflow.com/q/37460492/1016716) and [here](https://stackoverflow.com/q/25557299/1016716). Unless someone changed that on your computer — Mr Lister, Mar 11 '19 at 17:49

score 1 · Accepted Answer · answered Mar 13 '19 at 00:13

1

The layout works fine on IE11.

However, you may need to check the browser's compatibility setting.

Press F12, go to the "Emulation" tab, and check that "Document Mode" is set to IE11.

answered Mar 13 '19 at 00:13

Michael Benjamin

265,915
79
461
583

display: flex won't render properly in IE11

1 Answers1