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:

Answer 1

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