IE 10和11错误地解释最小宽度在Flexbox的

Question

IE 10 IE & 11解释一组与柔性盒组合min-width错误地使用时。

在下面的图像，既divs有其flex设置为1 1 0%;但第一个具有的200px一个min-width这实际上是在IE 10呈现为250px & 11：

小提琴：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又名内容的大小，使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。