Firefox padding bottom box-sizing: border-box

Question

We have a simple parent element with a child element inside. The content of the child element is bigger than the parent, so we want a scrollbar. We want to add some padding to the bottom, but Firefox (60.0.2) seems to ignore this. Is this a bug? In Chrome it appears to be working all right.

#foo{
          width: 200px;
          height: 200px;
        }
        
        #bar{
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          padding-top: 20px;
          padding-bottom: 50px;
          overflow: auto;
          background-color: yellow;
        }

 <div id="foo">
          <div id="bar">
            test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
          </div>
        </div>
    
        

Answer 1

You can just add one more div inside the parent element and add the padding-bottom to it. Try this code.

CSS

#foo {
  width: 200px;
  height: 200px;
}

#bar {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: yellow;
}

.inner {
  padding-top: 20px;
  padding-bottom: 50px;
}

HTML

<div id="foo">
  <div id="bar">
    <div class="inner">
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    </div>
  </div>
</div>