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

Question

考虑这个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/

Answer 1

我添加了这个 .inner {flex-basis: calc(100% - 0px;)} Css 并测试并且工作正常。