Css IE11中的多行flexbox计算宽度不正确？

如果使用

flex-wrap:wrap

，IE11似乎无法正确计算弹性项目宽度

看

这4个盒子都有弹性基础：50%，所以我们应该得到两行两个盒子，但在IE11中，每个盒子得到一行。将边框设置为0时，它可以正常工作

是否知道这是一个bug，或者是否有办法使IE11正常工作（并且仍然使用边界）

---

另外，谢天谢地，在我的项目中，只需要支持最新版本的流行浏览器，但IE11就是其中之一。

在使用

flex

属性计算大小时，似乎没有考虑

框大小的问题。由于边框占2px，它大于50%，因此一条线上只有一个适合，因此所有的框都被拉伸到全宽。如果禁用边框并添加2px填充，则可以看到同样的情况

通过将
最大宽度：50%
添加到
.box
规则集，可以使其正常工作，同时保持边框。否则，可以使用介于33.34%和49%之间的弹性值。这将使包括边框在内的宽度小于50%，并且随着元素增加以填充可用空间，它们仍将是flex容器的50%。有点难看，但除非你添加一个大于50%减去你设置的弹性值的组合边框和填充，否则它会起作用

也许比直接减少百分比值更好的方法是使用
calc（）
。所有支持现代Flexbox语法的浏览器都支持这一点。您只需要从要使用的百分比值中减去左右填充和边距的总和。在执行此操作时，实际上不需要“框大小”属性，因此可以将其删除。IE中似乎存在另一个问题，即不能在
flex
速记中使用calc，但可以在
flex basis
属性中使用calc，这正是您想要的

.box {
    border: 1px solid black;
    /* additional styles removed for clarity */

    /* 
    50% - (border-left-width + border-right-width +
           padding-left + padding-right)
    */
    -webkit-flex-basis: calc(50% - 2px);
    flex-basis: calc(50% - 2px);
}

请参阅演示：
我从Rob那里收到了Microsoft论坛上的解决方案。看

设置
min width
并更改为
flex:auto
可使长方体正常工作，保持其灵活性

有关解决方法的更高级示例，请参见和下面的内容：

<section>
    <div class="box fifty">1</div>
    <div class="box twentyfive">2</div>
    <div class="box twentyfive">3</div>
    <div class="box fifty">4</div>
    <div class="box fifty">5</div>
</section>


section {
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    box-sizing: border-box;
    margin:0;
    -ms-flex: auto;
    -moz-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.fifty {
    min-width: 50%;
}
.twentyfive {
    min-width: 25%;
}


1.
2.
3.
4.
5.
部分{
显示：-moz webkit flex；
显示：-webkit flex；
显示器：flex；
-ms柔性方向：行；
-moz弯曲方向：行；
-webkit柔性方向：行；
弯曲方向：行；
-ms-flex-wrap:wrap；
-moz-flex-wrap:wrap；
-webkit柔性包装：包装；
柔性包装：包装；
宽度：100%；
框大小：边框框；
保证金：0；
}
.盒子{
边框：1px纯黑；
背景：#ccc；
显示：块；
框大小：边框框；
保证金：0；
-ms-flex:auto；
-moz-flex:auto；
-webkitflex:auto；
flex：自动；
}
.50{
最小宽度：50%；
}
.二十五{
最小宽度：25%；
}
Philip Walton在这里对这个bug有一个很好的总结：。他提出了两种解决方案，其中最简单的是设置
flex基：auto
和声明
宽度。（不是
max width
或
min width
）此解决方案的优点是，当您更改填充或边框宽度时，不必调整
calc（）
。
因此，保留原始[正确的]CSS并附加针对IE10+的攻击：

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box {
        flex: 0;
        min-width: 50%;
    }
}

如果怀疑这是一个bug，那么您在上发布的可能是一个取整问题。FWIW将最大宽度设置为50%可以修复此问题。顺便说一句，您的代码中有一个输入错误：
-moz webkit flex
。不幸的是，添加最大宽度不会使长方体变得更灵活。但它确实看起来像一个长方体大小调整错误。第二个解决方案仍然有效。尽管您的上述解决方案在Safari和Firefox中不起作用，但使用此解决方案将起作用。只需确保25%的弹性低于25%，但高于下一个较小的尺寸。在下面的演示中，我使用了48%而不是50%，23%而不是25，但您可以根据需要进行调整：这是一个没有冗余前缀和类的版本，我使用calc添加了第二个解决方案的版本，而不仅仅是减少%的值，然后切换到flex-basis。因为这个答案对其他解决方案最有用，我把它标记为正确的。不过，我希望这不会违反stackoverflow礼节。这在Safari中不再有效。它没有包装。它也有不一致的结果。在Firefox中，它包装到第三行。顺便说一句，IE11实现时不需要使用ms前缀。IE10使用了一种不同的语法，您还没有通过显示启用它：-ms flexbox；无论如何因为Firefox实现了没有前缀的最终语法，所以也不需要-moz-前缀。谢谢你，大卫！我会把你的答案标记为正确！这篇帖子和答案救了我一天！非常感谢！救了我一天！非常感谢！
<section>
    <div class="box fifty">1</div>
    <div class="box twentyfive">2</div>
    <div class="box twentyfive">3</div>
    <div class="box fifty">4</div>
    <div class="box fifty">5</div>
</section>


section {
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    box-sizing: border-box;
    margin:0;
    -ms-flex: auto;
    -moz-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.fifty {
    min-width: 50%;
}
.twentyfive {
    min-width: 25%;
}

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box {
        flex: 0;
        min-width: 50%;
    }
}