4

I've got a container div with some padding around its content, a max height with overflow: auto, and some buttons at the bottom of the container. When the contents of the container grow enough so that a scrollbar appears, the bottom padding just disappears. This happens in seemingly every browser but Chrome.

.container {
  border: 1px solid;
  padding: 15px;
  max-height: 200px;
  overflow-y: auto;
  
  display: inline-block;
  width: 200px;
}

.footer {
  background: green;
}
<div class="container">
  <div style="height: 100px">Hello World</div>
  <div class="footer">Footer Stuff</div>
</div>

<div class="container">
  <div style="height: 200px">Hello World</div>
  <div class="footer">Footer Stuff</div>
</div>

Here's what it looks like in Firefox. The right container is scrolled all the way down; you can see the lack of bottom padding.

snippet result in firefox

Is this a known bug? Is there a recommended workaround?

(for the time being I'm going to make an "inner-container" class and put the padding on that instead of the outer "container", but it seems like I shouldn't need to do that)

Dylan
  • 13,645
  • 3
  • 40
  • 67
  • 1
    http://stackoverflow.com/questions/4278930/css-is-it-correct-that-text-content-of-a-div-overflows-into-the-padding, seems like the solution is to use `inner-container` as you have already worked out – Morpheus Feb 01 '17 at 05:55

0 Answers0