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?

Answer 1

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.