Contain A <div> Within Another <div> - css

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?

Answer 1

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>

Answer 2

Does your parent div have an absolute size? If it does you could so something like this:
<div style="width:100px;height:100px;">
<div style="position:absolute;overflow:auto;border:solid black 1px;">My Content</div>
</div>

Answer 3

Check this (not sure wether you want something like this),
<div class="outer-div">
<div class="inner-div">Test content Test content Test content Test content Test content Test content Test content Test content Test content Test content</div>
</div>
.outer-div {
width :200px;
height :100px;
border: 1px solid gray;
}
.inner-div {
width :50%;
height :75px;
border: 1px solid black;
overflow: auto;
}
Demo Fiddle