IE 10 & 11 interpretieren Min-Breite falsch in Flexbox

Question

IE 10 & IE 11 interpretieren einen Satz min-width falsch in Kombination mit Flex-Box.

Im Bild unten, sowohl divs haben ihren flex Satz 1 1 0%; aber der erste Teil hat ein min-width von 200px die tatsächlich als 250px in IE 10 & 11 wiedergegeben wird:

Fiddle: 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; 
} 

Ich finde keine Informationen dazu auf der flexbugs pages ...

Answer 1

Sie konnten die flex-basis-auto aka Inhalt-Größe festgelegt und die divs' width: 100% machen.

Fiddle: 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; 
} 

grundsätzlich beide div versuchen, die volle Breite des Mutter zu nehmen, aber # div1 „gewinnt“ wegen der min-Breite, und sie werden die Eltern, da Sie nicht überlaufen erlauben sie zu schrumpfen: flex-shrink: 1 (dh flex: 0 1 auto;)

Könnten Sie bitte auf IE10 testen, ich habe nur IE11.