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

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

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

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

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上按预期工作.

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

1)如果行宽超过父宽度,则行中包含多个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 for IE FlexBox,但项目是no longer being maintained(并没有作为修复工作)
>使用PostCSS plugin for Webpack尝试使用flex进行全局修复：1 1 0％
>在溢出其父级的div上应用宽度：100％会导致上面的嵌套列变成一个长列,因此虽然它部分修复了溢出问题,但它首先违背了使用flexBox的目的(因为我们想要许多div尽可能弯曲成一排).

解决方法

如果您需要一个不涉及声明宽度的解决方案,我可以使用几个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的新类.

原文地址：https://www.jb51.cc/css/215815.html