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

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?