padding-bottom is ignored in Firefox and IE on overflowing elements with no content

Question

This question is related to these 2:
1. css - applying padding to box with scroll, bottom-padding doesn't work
2. Bottom padding not working on overflow element in non-chrome browsers

But I didn't find anywhere as to why it happens, meaning, why in Chrome(31) and Opera(18) the padding does appear, and in Firefox(26) and IE(9-10) it doesn't.

Here's my test case:
http://jsfiddle.net/eW39h/4/

A simpler example from the related question #1:
http://jsfiddle.net/rwgZu/

<div id="container">
    <div id="innerBox"></div>
</div>

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#innerBox{
    height: 400px;
    background: #000;
}

I'm not really looking for a fix, but to understand what exactly is the correct implementation (and which browsers got it wrong :-)).

EDIT Dec 18th, 2013

Based on the answer by Marc Audet, I dug into the specs and made a new test case.
http://jsfiddle.net/rwgZu/79/

Here it's evident that all browsers clip the overflowing box at the same point, which is the padding-edge", which is indeed in accordance to the spec:

Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge

And still, in Chrome there's an extra padding after the inner box.

Interesting though, that adding overflowing content inside the inner box leads to unified results on all browsers:
http://jsfiddle.net/uPY8j/1/

I could not find in the specs the rules for this type of conditions, so I'm leaving the question still open for now.

Solution 1

I have the same issue here and instead of using :last-child div (what if last child is hidden?) and margin-bottom trick (not so nice, the scroll bar will not reach the bottom) I use this:

#container {
  padding: 20px;
  padding-bottom: 0;
  overflow: auto;
}

#container:after {
  content: "";
  height: 20px;
  display: block;
}

So inserting a pseudo element will ensure my extra space, so I can use it for simulating my padding bottom value. What do you think?

JSFIDDLE HERE: http://jsfiddle.net/z72sn0p2/2/

Solution 2

According to the W3 specification, overflowing content will be clipped to the edge of the padding box:

http://www.w3.org/TR/CSS21/visufx.html

FF takes the edge of the padding box to be the outer edge, which seems to be in accordance to the definition of the padding box:

http://www.w3.org/TR/CSS21/box.html

That being the case, FF seems to be closer to the spirit of the CSS specification wording, whereas Chrome seems to have decided to clip to the edge of the content box, which is the inner edge of the padding box.

To quote the specification:

The padding edge surrounds the box padding.

Does this mean the edge closer to the content box for the edge closer to the border?

I think that there is some ambiguity, leading to two interpretations. I suspect readers with an inclination towards pure mathematics and geometry may see it one way, and readers with a legal background may argue an alternative viewpoint.

In my opinion, the description of the box model is worded such that the progression of thought is from the inner content area towards the outer margin area. That being the case, I would think that the word "surrounds" would mean to enclose the outer edge of the area. Thus, I think FF is perhaps more right, but other developers at Chrome think otherwise.

Comments

[Ben Creasy]

I reported this incompatibility upstream to the CSS working group: github.com/w3c/csswg-drafts/issues/129#issue-156060453

[Alex Ilyaev]

@BenCreasy Good stuff, glad it's finally contributing to something useful

[Alex Ilyaev]

Thanks for the answer, definitely gave me a better direction to dig in. Though I think the spec is quite clear on what "padding-edge" means. Any way, I edited my question with new test cases and renamed the title.

[Alex Ilyaev]

Any thoughts on the new findings?

[Marc Audet]

No thoughts today, busy with Santa on Skype!

[Alex Ilyaev]

I don't remember what I did back then to overcome it, but using a pseudo element feels kinda hacky, though, I guess it's not so bad. I didn't use :last-child, not sure how it's related. Any way, would be nice if you'd add a Fiddle fork with your solution. Though it still doesn't answer why the difference between Chrome and Firefox, even today.

[Ender2050]

This is a very helpful answer - worked for me in FF, IE, Chrome, ...but not in Edge. Still trying to figure out a solution for Edge.

[DannyB]

Super helpful, confirmed working in FF, IE, Chrome and Edge

[user2867288]

I'm more concerned from a "what makes sense" or "what is useful" perspective. Chrome's implementation is useful to a developer, as you have the option of adding extra space to the bottom of an overflowing div or remove it by controlling the padding. Otherwise, padding-bottom is useless in this scenario.

[Matthieu Riegler]

Nice tweak ! Works ad advertised.