IE11 flex child 不会缩小以给具有 non-wrapping 内容的其他 child 留出空间

Question

当另一个 child 太小而不适合它的（非包装）内容时，IE11 不会收缩 flex child。

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

Fiddle

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，否则它遵循可以让元素为 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;
}

<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;（IE11不支持->max-content的可能替代方法）和calc() 为 max-width ，所以它不能缩小到内容大小以下，但需要为现在的浏览器重置， initial 可以帮助避免常规浏览器出错：

.container {
  display: flex;
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.3) 50%);
  margin-bottom:0.5em;
}

.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;
  /* i work around */
  width: 100%;
  max-width: calc(50vw - 100px);
  display: table;  /* IE11 :  cause max-content is not supported and flex is average */
  /* filter not IE 11 to reset default */
  display: initial;
  width: initial;
  max-width: initial;
}

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

<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/>right<br/>right<br/>right<br/>right<br/>right<br/> long_content_no_wrap_or_overflow
  </div>
</div>

第三个元素不会用 table 布局填充行的整个宽度，但会拉伸其高度。

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

IE11 flex child 不会缩小以给具有 non-wrapping 内容的其他 child 留出空间

IE11 flex child doesn't shrink to give room to other child with non-wrapping content

html

css

internet-explorer

flexbox

internet-explorer-11