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

wrap the content in a div with a clip property!!

check out heldin's answer @ How can I force overflow: hidden to not use up my padding-right space

Answer 2

Really late answer, but I want to give a really fresh and elegant solution with CSS. One could involve ::after pseudo-elements, but a more sustainable solution is:

    #mydiv p:last-child{
        margin-bottom:50px;
    }

assuming the div can have an id or a class to be identified with. In this solution the last <p> element will fill the missing bottom space.

No more nested nodes and fiddling with HTML! Yuppie!

Answer 3

Overflow has nothing to do with padding. Padding is more like an "internal border" in this case. If you want the overflow to be hidden, you need to change the actual size of your box, and use a bottom-margin of 0px instead. Overflows will still show up in your padding.

aka:

<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px 50px 0 50px; margin-bottom:0px;">
  <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>

Padding and Margins always go like this in CSS: top right bottom left (in that order)

If any value is 0px, you can simply use a zero. like:

padding:0;

or:

padding: 0 10px 0 0;

Any value other than zero must be specified with px, em, or pt.

Answer 4

I found that the easiest way was to add an element between the parent and child with

overflow:hidden;
height:100%;

http://jsfiddle.net/va78jsm5/2/

Then I didn't have to worry about matching the height/margin of the middle element.