我们有 flex-basis: auto 的父 flexbox;在最后一个父容器中,我们有一些 flexboxes 和 flex-basis: 0; 问题是最后一个父容器的行为就像他是空的。这只发生在 IE(11) 中。
请分享一些 hack 来修复它。
fiddler :https://fiddle.sencha.com/#view/editor&fiddle/2slv
这是文本示例:
-div:flex-basis=auto
-div:flex-basis=auto
-div:flex-basis=auto
--div:flex-basis=0
IE11 在计算顶级 div 的宽度时不考虑二级 div 内容的宽度。
.container {
display: flex;
background: #cccccc;
width: 50%;
}
.container > * {
flex: 1 1 auto;
}
.first {
background: #00ffff;
}
.last {
background: #ff00ff;
display: flex;
}
.btn {
flex: 1 1 0%;
display: flex;
height: 30px;
}
.btn-inner {
flex: 1 1 0px;
background: rgba(0,0,0,0.2);
display: flex;
}
.inner-inner {
flex: 1 1 auto;
}
<div class="container">
<div class="first">
<input type="text" \>
</div>
<div class="empty"></div>
<div class="last">
<div class="btn">
<div class="btn-inner">
first item item
</div>
</div>
<div class="btn">
<div class="btn-inner">
second item item
</div>
</div>
</div>
</div>
最佳答案
尝试设置 .container 类的 min-width 属性,并为 IE 浏览器将 flex-basis 属性从 0 更改为“auto”。
代码如下:
<style>
.container {
display: flex;
background: #cccccc;
width: 50%;
min-width:300px;
}
.container > * {
flex: 1 1 auto;
}
.first {
background: #00ffff;
}
.last {
background: #ff00ff;
display: flex;
}
.btn {
flex: 1 1 0%;
display: flex;
height: 30px;
}
.btn-inner {
flex: 1 1 0px;
background: rgba(0,0,0,0.2);
display: flex;
}
_:-ms-fullscreen, :root .IE-FlexAuto {
flex-basis: auto;
}
.inner-inner {
flex: 1 1 auto;
}
</style>
和
<div class="container">
<div class="first">
<input type="text" \>
</div>
<div class="empty"></div>
<div class="last">
<div class="btn IE-FlexAuto">
<div class="btn-inner IE-FlexAuto">
first item item
</div>
</div>
<div class="btn IE-FlexAuto">
<div class="btn-inner IE-FlexAuto">
second item item
</div>
</div>
</div>
</div>
结果如下:
关于html - IE Flexbox 不尊重子 Flexbox 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56375899/