IE 10＆amp; 11在flexbox中错误地解释了最小宽度

Question

IE 10＆amp;当与弹性框组合使用时，IE 11会错误地解释集min-width。

在下图中，divs flex的{​​{1}}设置为1 1 0%;，但第一个min-width 200px实际呈现为250px IE 10中的<div id="wrapper"> <div id="div1"></div> <div id="div2"></div> </div> ＆amp; 11：

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

HTML：

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

CSS：

list.Remove(test)

我在flexbugs pages ...

上找不到任何相关信息

Answer 1

您可以将flex-basis设置为auto又称内容大小，并将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（即flex: 0 1 auto;）

请你在IE10上测试，我只有IE11。