IE 10&当与弹性框组合使用时,IE 11会错误地解释设定的最小宽度. 在下图中,两个div的flex都设置为1 1 0%;但第一个的最小宽度为200px,实际上在IE 10& 11:
... . . IE 10&当与弹性框组合使用时,IE 11会错误地解释设定的最小宽度.
在下图中,两个div的flex都设置为1 1 0%;但第一个的最小宽度为200px,实际上在IE 10& 11:
小提琴: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,并使div的宽度: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因为最小宽度而“获胜”,并且它们不会溢出父级,因为你允许它们缩小:flex-shrink:1(即flex: 0 1自动;)
你能否在IE10上测试,我只有IE11.
. . .. ...