Question

I want a scrollable (overflow: auto) div element to be completely contained within another div, i.e. it should only function as an overlay to the parent. However, I’m not able to make this work with padding within the child (which I want).

See this fiddle for an example of my problem.

How can I accomplish what I’m after (if at all possible)?

HTML:

<div id="parent">
    <div id="child">
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
    </div>
</div>

CSS:

#parent {
   border: 1px solid #666;
   height: 2.5em;
   padding: 0;
}

#child {
    margin: 0;
    padding: 8px 20px;
    overflow: auto;
    height: 100%;
}

EDIT

Note that for technical reasons left out of this scenario, I have decided to make the child element scrollable as opposed to the parent element: The child needs to cover the parent entirely, but that makes the parent display at least one scrollbar.

Answer 1

I believe this is what you want. You were setting the height on the wrong element. I played with the borders just to make it easier to see what’s going on.

http://jsfiddle.net/QYG5g/4/