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

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/