Odd behavior calculating percentage padding with box-sizing:border-box;

[sirhk97]

Used fiddle to set up test case:http://jsfiddle.net/5M7X7/2/I have a pet project flexing some \[code\]border-box\[/code\] layouts. I'm seeing an odd (yet cross-browser consistant) behavior with layered block elements.As per the example, there are 3 divs: first one has a fixed height and width, its child has 100% height and width, plus a % padding on two sides, and its child is 100% height and width. The vertical padding is being calculated using the width. Is this some intentional quirk of \[code\]border-box\[/code\]? Is there a layout trick using css to make it behave "as I would expect", using the height to calculate vertical padding?I don't need the JS workaround, nor a different way to size my littlest box. I'm interested in this particular layout quirk, why it's happening, and if there's a pure, simple css way to make it "behave".EDITApparently, the padding % is calculated as a percentage of width, regardless of which box-sizing you're using. I have never in all my years as a front-end developer run into this before. If anyone knows a good workaround, I'm all ears.Thanks!