综合技术

multiline-flexbox in IE11 calculating widths incorrectly?

微信扫一扫,分享到朋友圈

multiline-flexbox in IE11 calculating widths incorrectly?
0

Seems IE11 doesn’t calculate flex item widths properly if flex-wrap: wrap
is used.

See http://jsfiddle.net/MartijnR/WRn9r/6/

The 4 boxes each have flex-basis: 50% so we should get two lines of two boxes each, but in IE11 each box gets one line. When setting the border to 0, it works correctly.

Any idea if this is a bug, or if there is way to make IE11 behave (and still use borders)?

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>
section {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -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;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    flex: 50%;
    box-sizing: border-box;
    margin:0;
}

P.S. In my project only the last version of popular browsers needs to be supported, thankfully, but IE11 is one of them.

Problem courtesy of: Martijn van de Rijdt

Solution

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.

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.

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.

.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/

Solution courtesy of: David Storey

Discussion

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

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

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

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

Discussion courtesy of: Martijn van de Rijdt

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.

Discussion courtesy of: nabrown78

This is clearly an IE bug
so leave the original [correct] CSS and append a hack that targets 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/

Discussion courtesy of: stedman

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...


CSS3 Recipes

华为对外媒证实鸿蒙OS存在:正在国内测试、最快数月内就绪

上一篇

010.MongoDB备份恢复

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
multiline-flexbox in IE11 calculating widths incorrectly?

长按储存图像,分享给朋友