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

Question

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.

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

Solution 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

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

Solution 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?

View more solutions