IE 10和11在flexbox中错误地解释了min-width

Question

当使用 flex box 时，IE 10和IE 11会错误地解释设置的 min-width 。在下面的图片中，两个 divs 的 flex 都设置为 1 1 0%; ，但第一个 div 的 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页面上没有找到关于这个的任何信息...

- suamikim

---

相关 - https://dev59.com/mZXfa4cB1Zd3GeqPk9mQ?rq=1 - Paulie_D

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 的最小宽度，#div1“获胜”，并且它们不会溢出父元素，因为你允许它们缩小：flex-shrink: 1（即flex: 0 1 auto;）。

请你测试一下IE10，我只有IE11。

- phil_lgr