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

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.