简单的flexbox示例在Internet Explorer 11中渲染不正确？

Question

Consider this simple example of 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;
}

Most browsers I have tested render this as AB , but Internet Explorer 11 instead renders an A and B superimposed on each other.

Is this a bug in IE11? If so, is there a way to tweak the CSS to get IE11 to render correctly?

https://jsfiddle.net/oh6x73ca/

Answer 1

I added this .inner {flex-basis: calc(100% - 0px;)} Css and tested and worked fine.