IE 10 和 11 在 flexbox 中错误地解释最小宽度
IE 10 & 11 interpret min-width incorrectly in flexbox
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...
上找不到任何关于此的信息
您可以将 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 和 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...
上找不到任何关于此的信息您可以将 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