Flexbox auto margins don't work with justify-content: center in IE

Question

I have a table where a cell can contain a number of icons, as well as text. If icons are present, they appear to the left of the text. There are a couple of possible alignment cases:

1. Only an icon is present: The icon should be centered
2. Only text is present: The text should be left aligned
3. Both icons and text are present: Both the icon and text should be left aligned

I thought that I could accomplish this and other more complicated alignments by wrapping everything within the table-cell with a flexbox, using justify-content: center;, and then applying margin-right: auto; to the text div.

If there is text, the auto margin will push everything over to the left.

If not, the justify-content style will center the icons.

Here is a codepen containing my approach.

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 2px solid black;
  width: 300px;
  height: 17px;
}
.icon {
  height: 17px;
  width: 17px;
  background-color: red;
}
.text {
  margin-right: auto;
}

<div class="flexbox">
  <div class="icon"></div>
  <div class="text">asdf</div>
</div>

This approach works in Chrome, but the right auto margin is not applied correctly in IE 11. I'm wondering why, and how I can get around it.

Extra Information

It almost seems as if IE 11 first calculates the auto margins, then aligns the flex items with no regard for those margins whatsoever, and finally applies the margins as best as it can.

I believe this because, when justify-content: flex-end; is set on the flexbox and the text div has margin-left: auto;, the icon is right aligned within the flexbox while the text is pushed outside of the bounds of the flexbox by almost the entire width of the flexbox (about what the auto margin should be).

Answer 1

As stated in the flexbox specification:

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

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

In your example, Chrome appears to be in compliance with the spec. (Firefox, as well.)

But IE11 – in cases where the parent has justify-content – is ignoring margin-right: auto on the flex item. This appears to be a bug.

When justify-content is removed, auto margins work.

One workaround would be to remove justify-content entirely and rely solely on auto margins:

1. Only an icon is present: The icon should be centered

.icon { margin: 0 auto; }

.flexbox {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  width: 300px;
  height: 17px;
}
.icon {
  height: 17px;
  width: 17px;
  background-color: red;
}
.icon {
  margin: 0 auto;
}

<div class="flexbox">
  <div class="icon"></div>
</div>

2. Only text is present: The text should be aligned left

.text { margin-right: auto; }

.flexbox {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  width: 300px;
  height: 17px;
}
.icon {
  height: 17px;
  width: 17px;
  background-color: red;
}
.text {
  margin-right: auto;
}

<div class="flexbox">
  <div class="text">asdf</div>
</div>

3. Both icons and text are present: Both the icon and text should be aligned left

.text { margin-right: auto; }

.flexbox {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  width: 300px;
  height: 17px;
}
.icon {
  height: 17px;
  width: 17px;
  background-color: red;
}
.text {
  margin-right: auto;
}

<div class="flexbox">
  <div class="icon"></div>
  <div class="text">asdf</div>
</div>

Answer 2

This work around of removing justify-content doesn't work for me. If you look at this example in IE11 you will see: Codepen example

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: white;
}

.item {
    margin: auto;
    width: 50px;
    height: 50px;
    background-color: red;
}