Keep inner div from expanding beyond fixed height outer div - html

Question

I need my last div ("content"), whose height can vary, to expand to fill the container div but not expand beyond it. If the content div's contents won't fit, it should simply scroll with overflow-y: auto
However, I can't seem to contain the content div. I've tried a host of css without success and would appreciate some help.
UPDATE
I see I left out one important piece of info. I do not want to specify a fixed height of the "content" div since the height of the container can vary (it is resizable). I would have to calculate and adjust the height of the content with each mousemove (which I am trying to avoid).
Here is a fiddle
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: absolute;
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: 100%;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div>

Answer 1

Explanation:
Added overflow: hidden; to #container and added
overflow-y: auto; to #content attribute
Scroll-Demo
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: relative;
overflow: hidden;
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: 100px;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
</table>
</div>
</div>

Answer 2

height:100% is preventing that. Specify height, for example, in pixels.
Or use height: calc(100% - 208px);, to calculate the dynamic height. Don't forget to change max-height to height.
#container {
height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: absolute;
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: calc(100% - 208px);
width: 100%;
border: 2px solid blue;
overflow-y: scroll;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div

Answer 3

Here is a bit of a more fun way to do it. Removed your need for putting width 100% all over the place as well!
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: flex;
flex-direction: column;
position: absolute;
}
#title {
flex: 0 0 100px;
border: 2px solid red;
}
#tabs {
flex: 0 0 100px;
border: 2px solid green;
}
#content {
flex: 1 1 auto;
border: 2px solid blue;
overflow-y: auto;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div>

Answer 4

You can do that using display: flex.
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
position: absolute;
display: flex; /* Added */
flex-direction: column; /* Added */
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: 100%;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
flex: auto; /* Added, this container should stretch in the remaining space */
}
Working Fiddle

Answer 5

You wanted only the last table to scroll, right?
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: absolute;
margin-bottom: 15px; /*just to see the bottom*/
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
box-sizing: border-box;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
box-sizing: border-box;
}
#content {
max-height: 138px;
box-sizing: border-box;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div>

Answer 6

HTML Code
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div>
Css
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: absolute;
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: 100px;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
}
fiddle link