Css Fixed Flex basis不随IE11中的内容扩展

我搜索了很多答案，但没有找到任何与此特定场景相关的问题。我找到了这个，但不完全一样：

情景：

有三个内部容器（右、中、左）的容器。在计算中间容器（弹性收缩：0）后，左右各占可用宽度空间的50%（弹性基础：50%）

预期行为：

在Chrome中，当左容器的内容比计算的flex basis宽度宽时，左容器将展开以容纳其内容，右容器将收缩

问题:

在Internet Explorer 11中，左侧容器保留计算的flex basis宽度，内容溢出

提前感谢您的关注

HTML

---

期望的结果是什么？您希望将

#left

容器根据需要展开，还是希望它绝对限制为

50%

？如果你想让IE像Chrome那样显示它，你需要将

flex-basis:auto

添加到

#left

。如果你想让Chrome像IE那样显示，你需要将

最大宽度：50%

添加到

#left

。谢谢你的输入！我想要Chrome的行为，因此

#左

容器可以根据需要展开。我不能添加

flex basis:auto

，因为我需要

#middle

尽可能保持在中间。我想补充的是

#content

的宽度是可变的，可以小于其父级的100%，但是父级应该有<代码> Flex基：50% < /代码>，以保持<>代码>中/代码>中间。期望的结果是什么？您希望将

#left

容器根据需要展开，还是希望它绝对限制为

50%

？如果你想让IE像Chrome那样显示它，你需要将

flex-basis:auto

添加到

#left

。如果你想让Chrome像IE那样显示，你需要将

最大宽度：50%

添加到

#left

。谢谢你的输入！我想要Chrome的行为，因此

#左

容器可以根据需要展开。我不能添加<代码> Flex Base:Audio因为我需要“代码”＞中/ <代码>尽可能地保持在中心。我想补充的是， >内容> <代码>的宽度是可变的，可以小于其父的100%，但是父级应该有<代码> Flex基：50% < /Cl> >保持“<代码>中间的/<代码>中间。

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

#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;  
}