title: Overflow scroll with padding Webkit v. Firefox
body: <p>I'm trying to figure out why padding is included in this scrolling content for Chrome (Mac Version 27.0.1453.110) but not in Firefox (Mac 21.0). I'm using the <code>box-sizing: border-box;</code> When I hit the bottom the scrolling content the padding is there in Chrome, but in Firefox the last element is the bottom, there isn't any padding below. Should I be using margin instead? Is this a bug for 1 of the browsers?</p>
  
  <p>I have an <a href="http://cdpn.io/iwpjI" rel="nofollow">example on codepen</a></p>
  
  <p>CSS:  </p>
  
  <pre><code>* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
  
  body {
    background-color: #222;
  }
  
  p {
   padding-bottom: 20px; 
  }
  
  .boxy {
    background-color: #111;
    border: 4px solid #FFFFFF;
    height: 442px;
    overflow: auto;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 722px;
  }
  
  .inside-boxy {
    background-color: #ff6000;
    height: 160px;
    padding: 12px 50px 50px 28px;
    position: absolute;
    overflow-y: scroll;
  }
  
  .in-links {
    background-color: #fff;
    height: 132px;
    margin-top: 22px;
    width: 600px;
   }
  </code></pre>
  
  <p>HTML:  </p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;Paul Irish Box Model FTW&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div class="boxy"&gt;
  
        &lt;div class="inside-boxy"&gt;
          &lt;p&gt;...&lt;/p&gt;
          &lt;p&gt;...&lt;/p&gt;
          &lt;div class="in-links"&gt;links!&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>