Question

根据Chrome中的相同行为，我们在IE11中有一系列div组件应该flex。在下面的小提琴中，你会发现组成一个＆＃39;列的复选框元素。结构，以及预期填充整个父级宽度的复选框元素。

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

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

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

The JSFiddle that replicates my problem can be found here。该示例在Chrome上按预期工作。更新于2018年11月，JSFiddle不再支持IE，因此除非我们在其他地方沙箱，否则此示例无效。

总结一下，有两种情况需要同时使用flexbox：

1） n 行中flex-wrap: wrap的数量，如果行宽超过父宽度

，则包裹到下一行

2）flex: 1如果自己的内容超出了父的宽度，就会换行到下一行

我尝试过的事情：

将速记flex-grow flex-shrink flex-basis扩展为其完整属性flex: 1 1 0%为＆＃34; IE的IE10和IE11默认值为0 0 auto而不是0 1 auto，根据草稿规范，截至2013年9月＆＃34;
使用JS Polyfill用于IE Flexbox，但项目为no longer being maintained（并且无法作为修复）
使用PostCSS plugin for Webpack尝试使用width: 100%进行全局修复
在溢出其父级的div上应用divs会导致上面的嵌套列变成一个长列，因此虽然它部分修复了溢出问题，但它在第一次失败时无法使用flexbox放置（因为我们希望尽可能多的{{1}}弯曲成一行）。

Answer 1

如果你需要一个不涉及声明宽度的解决方案，我能够使用一些flex规范来实现这个：

.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 的新类。