IE11 flex子级不会收缩以给其他具有非包装内容的子级腾出空间

Question

当另一个子项太小而无法容纳其（非包装）内容时，IE11不会收缩其子项。

我已经解决了臭名昭著的IE flex错误（https://github.com/philipwalton/flexbugs），并尝试了所有解决方案。

小提琴

https://jsfiddle.net/adriaanmeuris/ef8Lz7ck/73/

.container {
  display: flex;
}

.left {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  min-width: 0px;
  overflow: hidden;
  border: 1px solid red;
}

.center {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
  border: 1px solid green;
}

.right {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  border: 1px solid blue;
}

<div class="container">
  <div class="left">
    left<br/> shrinks to 0
  </div>
  <div class="center">
    center<br/> fixed width, always centered (unless right column is too small to fit it's content)
  </div>
  <div class="right">
    right<br/> long_content_no_wrap_or_overflow
  </div>
</div>

预期的行为（Chrome，FF，Safari，Edge）：

IE11行为：

Answer 1

flex-basis设置为0，将其删除或将其设置为auto，否则遵循规则，即可以让元素成为{{1 }}的0。

width

basis

...但是从中心开始失去第二个元素的位置...

---

否则，我能想到的唯一解决方法是.container { display: flex; } .left { flex-grow: 1; flex-shrink: 1; flex-basis: 0px; min-width: 0px; overflow: hidden; border: 1px solid red; } .center { flex-grow: 0; flex-shrink: 0; flex-basis: 200px; border: 1px solid green; } .right { flex-grow: 1; flex-shrink: 0; border: 1px solid blue; }（IE11中不支持-> <div class="container"> <div class="left"> left<br/> shrinks to 0 </div> <div class="center"> center<br/> fixed width, always centered (unless right column is too small to fit it's content) </div> <div class="right"> right<br/> long_content_no_wrap_or_overflow </div> </div>的替代方法）和display:table; 1}}，因此它不能缩小到内容大小以下，但是需要为当今的浏览器重新设置，max-content可以帮助避免常规浏览器出错：

calc()

max-width

第三个元素不会用表格布局填充行的整个宽度，而是会拉伸其高度。

initial也可以是在此处过滤IE11的另一种方法 ...（条件注释在早期删除了几个版本）