overflow:hidden ignoring bottom padding

Question

In the following example, the bottom padding is ignored, and the text flows to the bottom of the element before hiding. What is causing this?

<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px;">
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
</div>

A view with Firebug (purple is padding, blue is actual content area):

Answer 1

I prefer to use as few <div>s as possible.

<div class="container">
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
</div>

.container{
  padding: 30px 30px 0;
  position: relative;
  width: 240px;
  height: 170px;
  border:1px solid #000;
  overflow: hidden;
}
.container:after{
  content: ' ';
  display: block;
  background-color: red;
  height: 30px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

http://jsfiddle.net/bgaR9/

naturally in a world without IE < 9

Answer 2

The bottom padding exists but the content pushes the bottom padding down and is not visible because of overflow:hidden. What you can do is place the content in a container like so:

<div style="overflow:hidden; width: 300px; height: 200px; border:1px solid #000; ">
    <div style="overflow:hidden; width:auto; height:140px; border:30px solid #ff0000;">
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
    </div>
</div>

You can play with the fiddle here - http://jsfiddle.net/BMZeS/

Hope this helps.