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

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.