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

Question

我们有一系列 div 组件，它们应该在 IE11 中按照 Chrome 中的相同行为flex。在下面的 fiddle 中，您将找到构成“列”结构的复选框元素，以及预期填充整个父级宽度的复选框元素。

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

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

Is there a CSS solution where we can force .grid__item-flex to respect its container width without breaking the nested columns above it, and ensure that the last checkbox element (below it) stays on the same line?

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

---

总而言之，有两种情况下 flexboxes 必须同时工作:

1) n 行中 div 的数量，如果行宽超过父级的宽度则换行到下一行

• 我们可以使用 flex-wrap: wrap 实现这一点，但前提是元素具有正确的宽度

2) div 如果它自己的内容超过父级的宽度则换行到下一行

---

我尝试过的事情:

• 将简写 flex: 1 展开为它的完整属性 flex-grow flex-shrink flex-basis 作为“IE10 和 IE11 默认的 flex 值是0 0 auto 而不是 0 1 auto，根据规范草案，截至 2013 年 9 月”

• 使用 JS Polyfill对于 IE Flexbox，但是元素是 no longer being maintained (并且没有作为修复工作)

• 使用 PostCSS plugin对于尝试使用 flex: 1 1 0%

进行全局修复的 Webpack

• 在溢出其父级的 div 上应用 width: 100% 会导致上面的嵌套列变成一个长列，因此虽然它部分修复了溢出问题，但它违背了目的首先要有 flexbox(因为我们想要尽可能多的 div 来 flex 排成一行)。

Answer 1

如果您需要一个不涉及声明宽度的解决方案，我可以使用一些 flex 规范来解决这个问题:

参见示例:https://jsfiddle.net/0ykq19um/

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

要在 IE 中显式显示，

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

允许全 Angular ，和

.grid__row-overflow {
    flex: 1 1;
}

对于围绕(可能)溢出行的 .grid__row.grid__row-md.parent 上的新类。