使flexbox在IE11中继承适当的宽度-Java 学习之路

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

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

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

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

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

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

1）如果行宽超过父宽度，则连续数量的 div 包裹到下一行

2） div 如果's own content exceeds parent'的宽度包裹到下一行

Things I've tried:

将简写 flex: 1 扩展为其完整属性 flex-grow flex-shrink flex-basis as "IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto, as per the draft spec, as of September 2013"
使用JS Polyfill用于IE Flexbox，但项目是no longer being maintained（并且不能用作修复）
使用PostCSS plugin for Webpack尝试使用 flex: 1 1 0% 进行全局修复
在溢出其父级的div上应用 width: 100% 会导致上面的嵌套列变成一个长列，因此虽然它部分修复了溢出问题，但它首先破坏了使用flexbox的目的（因为我们想要尽可能多的 divs 可以弯成一排） .

1 回答