IE 10 & 11 interpret min-width incorrectly in flexbox

Question

IE 10 & IE 11 interpret a set min-width incorrectly when used in combination with flex box.

In the image below, both divs have their flex set to 1 1 0%; but the first one has a min-width of 200px which is actually rendered as 250px in IE 10 & 11:

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

I don't find any info about this on the flexbugs pages...

Answer 1

You could set the flex-basis to auto aka content-size and make the divs' width: 100%.

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

Basically both div try to take the full width of the parent, but #div1 "wins" because of the min-width, and they won't overflow the parent since you allow them to shrink: flex-shrink: 1 (i.e. flex: 0 1 auto;)

Could you please test on IE10, I only have IE11.