title: padding-bottom is ignored in Firefox and IE on overflowing elements with no content
body: <p>This question is related to these 2:<br>
  1. <a href="https://stackoverflow.com/questions/13471910/css-applying-padding-to-box-with-scroll-bottom-padding-doesnt-work">css - applying padding to box with scroll, bottom-padding doesn&#39;t work</a><br>
  2. <a href="https://stackoverflow.com/questions/10722367/bottom-padding-not-working-on-overflow-element-in-non-chrome-browsers">Bottom padding not working on overflow element in non-chrome browsers</a></p>
  
  <p>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.</p>
  
  <p>Here's my test case:<br>
  <a href="http://jsfiddle.net/eW39h/4/" rel="noreferrer">http://jsfiddle.net/eW39h/4/</a></p>
  
  <p>A simpler example from the related question #1:<br>
  <a href="http://jsfiddle.net/rwgZu/" rel="noreferrer">http://jsfiddle.net/rwgZu/</a></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="innerBox"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  #container {
      padding: 3em;
      overflow-x: hidden;
      overflow-y: auto;
      width: 300px;
      height: 300px;
      background: red;
  }
  
  #innerBox{
      height: 400px;
      background: #000;
  }
  </code></pre>
  
  <p>I'm not really looking for a fix, but to understand what exactly is the correct implementation (and which browsers got it wrong :-)).</p>
  
  <p><strong>EDIT</strong> <em>Dec 18th, 2013</em></p>
  
  <p>Based on the answer by Marc Audet, I dug into the specs and made a new test case.<br>
  <a href="http://jsfiddle.net/rwgZu/79/" rel="noreferrer">http://jsfiddle.net/rwgZu/79/</a></p>
  
  <p>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:</p>
  
  <blockquote>
    <p>Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge</p>
  </blockquote>
  
  <p>And still, in Chrome there's an extra padding after the inner box.</p>
  
  <p>Interesting though, that adding overflowing content inside the inner box leads to unified results on all browsers:<br>
  <a href="http://jsfiddle.net/uPY8j/1/" rel="noreferrer">http://jsfiddle.net/uPY8j/1/</a></p>
  
  <p>I could not find in the specs the rules for this type of conditions, so I'm leaving the question still open for now.</p>