Flexbox自动边距不适用于IE中的justify-content：center

Question

我有一个表格，其中一个单元格可以包含许多图标以及文本。如果存在图标，则它们显示在文本的左侧。有几种可能的对齐情况：

1. 仅显示图标：图标应居中
2. 仅存在文字：文字应左对齐
3. 图标和文字都存在：图标和文字都应左对齐

我认为通过使用justify-content: center;将{_1}}中的所有内容包装到表格单元格中，然后将margin-right: auto;应用于文本div，我可以完成此操作和其他更复杂的对齐。

如果有文字，自动边距会将所有内容推到左侧。

如果没有，justify-content样式将使图标居中。

Here is a codepen包含我的方法。

.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>

此方法适用于Chrome，但在IE 11中未正确应用正确的自动边距。我想知道为什么，以及如何绕过它。

额外信息

似乎IE 11首先计算自动边距，然后对齐柔性项目而不考虑这些边距，最后尽可能地应用边距。

我相信这是因为，当在flexbox上设置justify-content: flex-end;并且文本div具有margin-left: auto;时，图标在flexbox中右对齐，而文本被推到flexbox的边界之外几乎整个flexbox的宽度（关于汽车保证金应该是什么）。

Answer 1

这种去除对齐内容的工作对我来说不起作用。如果您在IE11中查看此示例，您将看到：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;
}