多线弯曲在IE11计算宽度不正确?-multiline-flexboxinIE11calculatingwidthsincorrectly?

34  

It looks like a bug where box-sizing is not being taken into account when calculating the size using the flex property. As the border takes up 2px, it is larger than 50% and thus only one fits on a line, so all boxes are stretched to the full width. You can see the same thing happening if you disable the border and add 2px padding instead.

它看起来像一个错误，在使用flex属性计算大小时没有考虑到方框大小。由于边框占了2px，它大于50%，因此只有一个符合线，所以所有的框都被拉伸到全宽。如果禁用边框并添加2px填充，也会发生同样的情况。

You can make it work correctly while keeping the borders by adding max-width: 50% to the .box ruleset. Otherwise you can use a flex value between 33.34% and 49%. This will make the width less than 50% including the border, and as the elements grow to fill available space, they’ll still be 50% of the flex container. Kind of a ugly hack, but it will work unless you add a combined border and padding larger than 50% minus the flex value you set.

您可以通过在.box规则集中添加最大宽度:50%来保持边界正确工作。否则，您可以使用33.34%到49%之间的flex值。这将使宽度小于50%，包括边框，当元素增长到可用空间时，它们仍然是flex容器的50%。这有点难看，但除非你添加一个大于50%的边框和填充，减去你设置的flex值，否则它是可以工作的。

Perhaps a better way than decreasing the percentage value directly is to use calc(). This is supported by all browsers that support the modern Flexbox syntax. You just need to subtract the combined total of the left and right paddings and margins from the percentage value you want to use. As you‘re doing this you don’t really need the box-sizing property so it can be removed. There seems to be another issue in IE where you can’t use calc in the flex shorthand but you can use it in the flex-basis property, which is the one you want.

也许比直接减少百分比值更好的方法是使用calc()。支持现代Flexbox语法的所有浏览器都支持这一功能。您只需要从您想要使用的百分比值中减去左、右围和边距的总和。当你这样做的时候，你并不需要box尺寸属性，这样它就可以被移除。IE中还有一个问题，你不能在flex速记中使用calc，但你可以在flex基础属性中使用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);
}

See the demo: http://jsfiddle.net/dstorey/78q8m/3/

看到演示:http://jsfiddle.net/dstorey/78q8m/3/

9  

I received an workaround on the Microsoft forum from Rob. See http://social.msdn.microsoft.com/Forums/ie/en-US/8145c1e8-6e51-4213-ace2-2cfa43b1c018/ie-11-flexbox-with-flexwrap-wrap-doesnt-seem-to-calculate-widths-correctly-boxsizing-ignored?forum=iewebdevelopment

我在微软论坛上收到了来自Rob的一个解决方案。参见http://social.msdn.microsoft.com/forums/ie/en - us/8145c1e8 6楼- 4213 ace2 - 2 cfa43b1c018/ie - 11 - flexbox flexwrap似乎-包装-不- - -计算-宽度-正确- boxsizing ignored?forum=iewebdevelopment

Setting a min-width and changing to flex:auto makes the boxes behave, maintaining their flexiness.

设置一个最小宽度，并切换到flex:auto使这些箱子的行为，保持它们的灵活性。

See http://jsfiddle.net/MartijnR/WRn9r/23/ and below for a slightly more advanced example with the workaround:

请参阅http://jsfiddle.net/MartijnR/WRn9r/23/及下面的http://jsfiddle.net/MartijnR/WRn9r/23/，了解一个稍微高级一些的解决方案示例:

    
1
    
2
    
3
    
4
    
5



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%;
}

6  

Philip Walton has an excellent summary of this bug here: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box. He proposes two solutions, the easiest of which is to set flex-basis: auto and declare a width instead. (Not max-width or min-width.) This solution has the advantage of not having to adjust your calc() when you change padding or border widths.

Philip Walton在这里对这个错误有一个很好的总结:https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt- accountforsizingborder -box。他提出了两种解决方案，其中最简单的是设置浮动基础:auto和声明宽度。(不是max-width或者min-width)。这种解决方案的优点是，当您更改填充或边框宽度时，不必调整calc()。

5  

This is clearly an IE bug so leave the original [correct] CSS and append a hack that targets IE10+:

这显然是IE的一个bug，所以请保留原始的[正确的]CSS，并添加针对IE10+的黑客攻击:

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

http://jsfiddle.net/stedman/t1y8xp2p/

http://jsfiddle.net/stedman/t1y8xp2p/