侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

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

2023-03-10 星期五 / 0 评论 / 0 点赞 / 70 阅读 / 1615 字

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.

. . .. ...

广告 广告

评论区