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.

Answer 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/

Answer 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.