Flex auto margin not working in IE10/11

Question

I have a complex layout where I center various elements vertically and horizontally with flexbox.

The last element then has margin-right:auto; applied to push the elements left (and negate centering them).

This works correctly everywhere except on IE10/11 and has been driving me crazy.

HTML/CSS sample:

http://codepen.io/anon/pen/NrWVbR

You'll see two items on the screen that should be left-aligned on the side of the red parent (i.e. they should both be centered, but the last item has margin-right:auto; applied and is filling the entire line, pushing the other item and itself on the side) - this is the correct behaviour. Except in IE10/11 where both items are incorrectly centered i.e. the second item's margin-right:auto; is ignored.

Any IE/flexbox experts out there that have encountered something like this before?

Answer 1

This appears to be an IE bug.

According to the flexbox specification:

8.1. Aligning with auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

In other words, auto margins take precedence over justify-content.

In fact, if an element has auto margins applied, then keyword alignment properties such as justify-content and align-self have no effect (because the auto margins have taken all the space).

Your code works as expected in Chrome and Firefox because those browsers are in compliance with the spec.

IE10 and IE11 appear to not be in compliance. They are not applying the auto margin as defined in the spec.

(Note that IE10 is built on a previous version of the spec.)

---

Solutions

Method #1: Use auto margins only

If justify-content is removed, auto margins work fine in IE10/11. So don't use justify-content. Use auto margins all the way through. (See examples of alignment with auto margins).

Method #2: Use an invisible spacer div

Create a third div with visibility: hidden and flex-grow:1. This will naturally shift #first-item and #second-item to the left edge, with no need for auto margins.

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#third-item {
  flex-grow: 1;
  visibility: hidden;
}
/* just some colors - not important */
#container {
  height: 200px;
  width: 100%;
  background: pink;
}
#container > div {
  background: cornflowerblue;
  padding: 10px;
  outline: 1px solid yellow;
}

<div id='container'>
  <div id='first-item'>first item</div>
  <div id='second-item'>second item</div>
  <div id='third-item'>third item</div>
</div>