修复的Flex-basis不会随着IE11中的内容而扩展

Question

我搜索了很多答案，但我没有找到任何针对此特定情况的报告问题。我找到了这个，但它并不完全相同：flex-basis doesn't account for box-sizing:border-box。

情景：

一个容器，有三个内部容器，右侧，中间和左侧。计算中间容器后，左右占据可用宽度空间的50％（flex-basis：50％）。（flex-shrink：0）。

预期行为：

在Chrome中，当左侧容器的内容宽于计算的弹性基础宽度时，左侧容器将展开以容纳其内容，右侧容器将缩小。

问题：

在Internet Explorer 11中，左侧容器保留计算的弹性基础宽度，内容溢出。

https://jsfiddle.net/mqxwra1d/5/

提前感谢您的关注。

HTML

<div id=container>
    <div id=left>
    <div class=content></div>
    <div class=content></div>
    <div class=content></div>
  </div>
  <div id=middle>middle</div>
  <div id=right>right</div>
</div>

CSS

#container{
  display:flex;
  width: 280px;
}
#left,#right{
  display:flex;
  flex-basis:50%;
  flex-shrink:1;
  background:yellow;
}
#middle{
  display:flex;
  flex-shrink:0;
  background:cyan;
}
.content{
  display:block;
  width:50px;
  height:50px;
  min-width:50px;
  margin:1px;
  background:red;  
}