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

Answer 1

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.

Answer 2

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/