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

Posted 2023-03-06

【中文标题】在 IE11 中使 flexbox 继承适当的宽度

【英文标题】：Making flexbox inherit proper width in IE11

【发布时间】：2017-04-13 22:02:31

【问题描述】：

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

在全角复选框元素开始的第二行，该元素预计将换行到下一行，因为其中的 .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) n 行中div 的数量，如果行宽超过父级宽度，则换行到下一行

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

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

---

我尝试过的事情：

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

对 IE Flexbox 使用 JS Polyfill，但项目是 no longer being maintained（并且没有作为修复工作）

对 Webpack 使用 PostCSS plugin 尝试使用 flex: 1 1 0% 进行全局修复

在溢出其父级的 div 上应用 width: 100% 会导致上面的嵌套列变成一个长列，因此虽然它部分解决了溢出问题，但它首先破坏了使用 flexbox 的目的（因为我们希望尽可能多的divs 排成一行）。

【问题讨论】：

@Michael_B 我的那个问题应该是重复的，有 1）没有接受的答案，2）我之前看过并尝试过的一个答案没有奏效。此外，这个问题更具体地针对flex-direction: row，在 IE11 的父容器中看起来更像flex-direction: column。我的问题是 flex-direction: row 在 IE11 上溢出父容器的宽度。

一个问题是否有可接受的答案是无关紧要的。许多具有有用答案的问题都没有被接受（例如here 和here）。单击复选标记是可选的并且经常被忽略。根据您的第二点，我已重新打开您的帖子。

@Michael_B 好点，感谢您重新打开。我将使用我尝试过的方法（以及类似答案的链接）来更新问题本身，以避免重复的答案。

我认为您没有得到任何答案的原因与代码的复杂性有关。由于嵌套元素众多，很难识别问题，更不用说解决问题了。考虑将代码简化到重现问题所需的最低限度。

你在.grid__row上试过width: 100%吗？ jsfiddle.net/6vymtwyp/80

【参考方案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 上的新类。