使flexbox在IE11中继承适当的宽度

Question

根据Chrome中的相同行为,div我们flex在IE11中有一系列组件.在下面的小提琴中,您将找到构成"列"结构的复选框元素,以及预期填充整个父级宽度的复选框元素.

在全宽复选框元素开始的第二行,该元素应该换行到下一行,因为.grid__item-flex它中的元素超过.grid__row了几个级别中可用的宽度.但是,在IE11上,该宽度不再受到尊重,因此.grid__item-flex继续溢出父元素的宽度.

失败的潜在解决方案包括强制执行宽度.grid__item-flex; 我们给它100%宽度,但上面的嵌套复选框元素将失去其列结构.此外,max-width: 100%当我们应用它时,属性似乎被忽略了.grid__item-flex.

是否有CSS解决方案,我们可以强制.grid__item-flex尊重其容器宽度而不破坏它上面的嵌套列,并确保最后一个复选框元素(在它下面)保持在同一行？

可以在这里找到复制我的问题的JSFiddle.该示例在Chrome上按预期工作.更新于2018年11月,JSFiddle不再支持IE,因此除非我们在其他地方沙箱,否则此示例无效.

---

总而言之,Flexbox必须同时工作的两种情况:

1)ñ的数目div在换到下一行的行如果行宽度超过母体的宽度

• 我们可以使用flex-wrap: wrap,但只有当元素具有正确的宽度时才能实现

2)div如果它自己的内容超过父亲的宽度,则包裹到下一行

---

我试过的事情:

• 将速记扩展flex: 1为其完整属性,flex-grow flex-shrink flex-basis因为"IE10和IE11的默认值为0 0自动而不是0 1自动,根据草案规范,截至2013年9月"

• 使用JS Polyfill for IE Flexbox,但项目不再被维护(并且不能作为修复工作)

• 使用Postpack的PostCSS插件尝试使用全局修复flex: 1 1 0%

• 应用width: 100%溢出其父级的div会导致上面的嵌套列变成一个长列,因此虽然它部分地修复了溢出问题,但它首先打破了使用flexbox的目的(因为我们希望尽可能多divs地弯曲成一排).

Answer 1

如果您需要一个不涉及声明宽度的解决方案，我可以使用几个 Flex 规范来实现此目的：

请参阅示例： https: //jsfiddle.net/0ykq19um/

.grid__item-flex {
    flex: 0 1 auto;
}

为了明确地使用 IE，

.grid__item-flex:only-child {
    flex: 1 1 auto;
}

允许全角，并且

.grid__row-overflow {
    flex: 1 1;
}

对于.grid__row.grid__row-md.parent上的新类，它围绕（可能）溢出的行。