IE 10 和 11 在 flexbox 中错误地解释最小宽度

Question

IE 10 和 IE 11 在与弹性框结合使用时会错误地解释集合 min-width。

在下图中，divs 的flex 都设置为1 1 0%;，但第一个min-width 的200px 实际上在IE 10 和11 中呈现为250px：

小提琴：https://jsfiddle.net/wspwd85h/2/

HTML：

<div id="wrapper">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

CSS：

#wrapper {
  width: 300px;
  height: 100px;
  background: yellow;
  display: flex;
  display: -ms-flexbox;
}

#wrapper div {
  flex: 1 1 0%;
  -ms-flex: 1 1 0%;
}

#div1 {
  background: green;
  min-width: 200px;
}

#div2 {
  background: red;
}

我在flexbugs pages 上找不到任何有关此的信息...

Answer 1

您可以将 flex-basis 设置为 auto aka content-size 并设置 div 的 width: 100%。

小提琴：https://jsfiddle.net/jofjmwz6/

#wrapper {
  width: 300px;
  height: 100px;
  background: yellow;
  display: flex;
  display: -ms-flexbox;
}

#wrapper div {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  width: 100%;
}

#div1 {
  background: green;
  min-width: 200px;
}

#div2 {
  background: red;
}

基本上，两个 div 都尝试采用父级的全宽，但由于最小宽度，#div1 “获胜”，并且它们不会溢出父级，因为您允许它们缩小：flex-shrink: 1（即@ 987654327@)

你能不能在IE10上测试一下，我只有IE11。