Elements nested in pos abs parent does not respect parents padding bottom

Question

So, having trouble with the content of my absolute positioned parent. For some reason the padding is only applied to top, left and right. The bottom value does not have any effect.

Here's a demo:
http://jsbin.com/aWUQIgIw/1

fieldset .inner-fieldset {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow-y: scroll;
    padding: 2rem;
}

Answer 1

The parent root container is positioned absolutely to the body with overflow-y: scroll. The padding is in the DIV but the content is overflowing the bottom. Overflow content is shown behind padding since it's "inside" the parent element.

The easiest fix is to convert padding to margin for the container, which will properly hide the content.

Edit: You mentioned the goal was to have spacing between the actual text content and the bottom of the window after scrolling:

You can't have an absolutely positioned div with overflow content apply padding to the bottom of the overflown content... so there's no other way. If it's the spacing you're after, something inside the positioned div needs a margin/padding-bottom

http://jsbin.com/aWUQIgIw/6/