css - 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:

#container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -ms-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

#second-item {
  margin-right: auto;
}

/* just some colors - not important */
#container {
  height: 200px;
  width: 100%;
  background: red;
}
#container > div {
  background: blue;
  padding: 10px;
  outline: 1px solid yellow;
}

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

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>