Absolutely positioned div is too wide when padding: % - html

Question

I have two divs, one position:static and one position:absolute. Despite having the same width and padding values, the absolutely positioned div gets about 17px wider. This only happens when I specify the horizontal padding as a percentage. How do I get these divs to be the same width without removing the % padding?
.foo {
border:2px solid blue;
background: pink;
width: 200px;
padding: 20px 20%;
}
.foo:nth-child(3) {
border-color: red;
position:absolute;
top:96px;
}
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

Answer 1

I know how to fix this:
body {
width: 100%;
}
I'm just not 100% sure why this is happening. It probably has something to do with the absolute positioned element does not share the same containing element (body vs html) and that is what padding that uses percentages is based off of.

Answer 2

That's because percentages are resolved relatively to the containing block, which varies in the absolute case.
For the in-flow elements, the containing block is established by the body element, which by default has some margin, so it's narrower than the viewport.
For the absolutely positioned element, the containing block is established by the nearest positioned ancestor. Since there isn't any, it's the initial containing block, established by the viewport.
The solution is positioning body so that it establish the containing block for the absolutely positioned element:
body {
position: relative;
}
body {
position: relative; /* Establish the containing block for absolutely positioned descendants */
}
.foo {
border: 2px solid blue;
background: pink;
width: 200px;
padding: 20px 20%;
}
.foo:nth-child(3) {
border-color: red;
position: absolute;
top: 96px;
}
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

Answer 3

The problem you're facing is in reality a pretty common one: default margin on the body.
By adding margin: 0; for the body, the issue is solved. The reason why padding: 20px 20%; behaves differently for the elements is because the percentage value is based on the width of the parent - for the statically positioned elements, this is reduced by the default margin. However, for the absolutely positioned element, this margin on the body is ignored (html rather than body is treated as its parent, which has no margin) and the 20% will be of a larger number.
This is also why you had to use top:96px; instead of top:88px (40px in padding + 8px in borders) for that absolutely-positioned element - the default margin pushed down the top two elements.
Here's your code, adjusted accordingly:
body {
margin: 0;
}
.foo {
border: 2px solid blue;
background: pink;
width: 200px;
padding: 20px 20%;
}
.foo:nth-child(3) {
border-color: red;
position: absolute;
top: 88px;
}
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

Answer 4

I know this is an old one, but it shows up in the top spot in google for certain terms, so I thought I'd go ahead and give the correct answer.
Yes, this does have to do with inheriting parent, but not in the way described. Body inherits it's values from the html tag, meaning that the issue isn't with the body tag.
The clue is in the very specific 17 pixels. That is the default width of the scrollbar in chrome.
Looking at the code here, the width was specified in %. Setting the body to
width:100%
margin:0px
padding:0px
will set the body to be the same width as the tag
The tag in turn will be 100% of the AVAILABLE window, which means that if your content generates a scrollbar, that width is now -17 pixels wide.
The sollution is to set either your body or your html tag (yes, you can style that one too) to
width:100vw;
vw doesn't take the scrollbar into account, but instead only displays the windows width.
I hope that makes sense, and that I have managed to help you solve your problem.