Contain A <div> Within Another <div>

Question

I am trying to contain a div's borders within its parent div, and I would like the overflow text from the child div to automatically put a scroll-bar on the child div. I have tried everything that I can think of, but I do not know of a way to do that which I am trying to do. Could someone please offer me some advice on how to do this as efficiently as possible?

Solution

My parent div has a percentage-defined height though

This should not be a problem, as long as parents has an height that has a valid value.You can set a height or a max-height width a percentage value.

max-height, will let it grow untill it matches the max value.

http://jsfiddle.net/E2Mfa/
For instance this style sheet:

html, body, .childContainer1 {
    height:100%;
    background:#edf;
}
body, div, p {
    margin:0;
}
.parentContainer {
    height:25%;
    background:#fed;
}
.childContainer1 {
    overflow:auto;
}
.childContainer2 {
    max-height:100%;
    background:#def;
    overflow:auto;
}

If you remove height from html or body, it doesnt work anymore. When you give percentage height, it calculates it from its parent height.
If no height found in CSS parent, then there is no value to calculate from.
max-height returns no values avalaible to calculate a percentage height for the childs

The structure used here :

<div class="parentContainer">
    <div class="childContainer1">
...
    </div>
</div>
<div class="parentContainer">
    <div class="childContainer2">
...
    </div>
</div>
<div class="parentContainer">
    <div class="childContainer1">
...
    </div>
</div>
<div class="parentContainer">
    <div class="childContainer2">
...
    </div>
</div>

Comments

[PWF]

The size of the <div> varies by percentage. In terms of horizontal resizing, the text in the child div moves, pushing the text down. That's why the text overflows.

[Blake A. Nichols]

Are you trying to keep the parent at a fixed height? otherwise it should resize vertically as expected.

[PWF]

No, the parent is working as I want. I am having a problem with the child. I want the child to not overflow. The top part of the child stays in the div, but as the parent div gets horizontally smaller, so does the child div, but the parent div doesn't grow vertically - that's the way I want it. The problem is that as the child gets horizontally smaller, it gets vertically longer.

[PWF]

Here is, based on the demo that you provided, a modified version that demonstrates my problem. (jsfiddle.net/KTC3S/3) I want to have the overflow text add a scrollbar. The problem for me is that overflow:auto; doesn't work.

[Nalaka526]

You should set height in inner-div, otherwise it won't work... jsfiddle.net/KTC3S/5

[PWF]

Can I use 'auto' for the height?

[PWF]

@GCyrillus My parent div has a percentage-defined height though.