简单的 flexbox 示例在 Internet Explorer 11 中呈现不正确？答案

【问题标题】：Simple flexbox example renders incorrectly in Internet Explorer 11?简单的 flexbox 示例在 Internet Explorer 11 中呈现不正确？
【发布时间】：2018-09-13 02:05:15
【问题描述】：

考虑display: flex这个简单的例子：

<div class="outer">
  <div class="inner">A</div>
  <div class="inner">B</div>
</div>

.outer {
  display: flex;
}
.inner {
  flex-grow: 0;
  flex-basis: 0px;
}

我测试过的大多数浏览器都将其呈现为 AB，但 Internet Explorer 11 将 A 和 B 相互叠加呈现。

这是 IE11 中的错误吗？如果是这样，有没有办法调整 CSS 以使 IE11 正确呈现？

https://jsfiddle.net/oh6x73ca/

【问题讨论】：

IE11中flex-shrink的计算值是多少？
@AndreiGheorghiu - 1，但如果我添加 .inner { flex-shrink: 0; }，则不会有任何变化。
元素不应该从父元素的长度中分配任何空间，因此下一个元素应该与前一个元素在同一点开始。我相信 IE 是在这里正确呈现的。我不是 flexbox 方面的专家，但到目前为止，您似乎在问错误的问题 :)。不过，将 flex-basis 更改为 auto 应该可以解决您在 IE 中的“问题”。

标签： html css internet-explorer flexbox internet-explorer-11

【解决方案1】：

我添加了这个 .inner {flex-basis: calc(100% - 0px;)} Css 并测试并运行良好。

【讨论】：