IE 10 和 11 在 flexbox 中错误地解释最小宽度

Question

IE 10 和 IE 11 在与 flex box 结合使用时会错误地解释集合 min-width。

在下图中，两个 divs 都将 flex 设置为 1 1 0%;，但第一个的 min-width 为 200px，这实际上是在 IE 10 和 11 中呈现为 250px：

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

我在 flexbugs pages...

上找不到任何关于此的信息

Answer 1

您可以将 flex-basis 设置为 auto aka content-size 并使 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;
}

基本上div都尽量占父级的全宽，但是#div1"wins"因为min-width，所以不会溢出父级因为您允许它们缩小：flex-shrink: 1（即 flex: 0 1 auto;）

能不能在IE10上测试一下，我只有IE11

IE 10 和 11 在 flexbox 中错误地解释最小宽度

IE 10 & 11 interpret min-width incorrectly in flexbox

css

internet-explorer

flexbox

internet-explorer-11

internet-explorer-10