IE10 flexbox widths include padding, causing overflow. box-sizing: border-box doesn't fix

问题

The LHS flex child in this example has 1em padding, and it will cause RHS to overflow the parent:

<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">

    <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box">
        LHS
    </div>

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box">
        RHS
    </div>

</div>

Here's the fiddle:

http://jsfiddle.net/GY4F4/6/

How can I eliminate the overflow when flex children have padding? box-sizing: border-box doesn't work.

回答1:

I had similar problems with flexbox and box-sizing: border-box;. The latter one just doesn't seem to work in IE. Width wouldn't work in this case since padding will change it - but if you can use max-width, that should fix the problem.

回答2:

In IE flex-basis doesn't account for box-sizing:border-box. It's a know bug as described here: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

Though it has been fixed in Edge now.

Some fixes:

Apply negative margin to its container to counteract child padding
Use flex-basis: calc($basisValue - $paddingValue) ← this worked best for me
Use pseudo-elements instead of padding, pseudo-elements don't count as width
Use flex-basis: auto
Limit width explicitly: max-width: $value

回答3:

I was able to solve this by adding:

-ms-flex-preferred-size: calc($basisValue - $paddingValue * 2);

So this combination worked, even when using autoprefixer:

.element {
    padding: 1rem;
    flex: 0 1 20%;
    -ms-flex-preferred-size: calc(20% - 2rem);
}

The calc value handily overrode the auto-generated prefixes, only noticed by IE.

回答4:

The issue appears to be the value for -ms-flex-negative: 0 on the box that has the padding, if this is set to 1, it appears to work.

The background of RHS will now remain within the box, however its content won't, although it's the same with LHS. Adding max-width: 100% to LHS fixes that, but not on RHS, but adding word-break: break-all then causes the content to break and remain within the RHS box.

Fiddle

Is this what you want?