Sizing a child element relative to parent's border-box

Sizing a child element relative to parent's border-box

If I set the size of a child element in percentage, the size will be
calculated relative to parent's content-box, independently from the fact
that I have set its box-sizing property to border-box.
So if I have something like this:
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
The width of .child will be 50% of 400px (parent's width after padding has
been applied). You can see an example here: JSBin
Main Question
Is there a way to make the width of a child element relative to the
parent's border-box rather than the parent's content-box?
Bonus question
While making my example I noticed a weird behavior in the calculation of
the size. Setting the .parent's padding as 0 10% actually gives a padding
of 68-odd pixels from each side. Why is that? Isn't 10% of 600px 60px or I
am missing something?