Prevent table from expanding beyond parent

Question

I have a table that is contained in a parent div. The issue I'm seeing is that when the table contains data that is larger than the parent, it will expand past the parent.

Here's a fiddle, basically everything needs to be contained in the blue box. (more information below) http://jsfiddle.net/CjX2v/7/

table {
    background-color: red;
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height:100%;
}
table > tbody > tr:first-child {
    background-color: green;
    height: 20px;
}
div {
    background-color: blue;
    width:500px;  /* This value is not known, supplied by user */
    height: 500px;  /* This value is not known, supplied by user */
    display: inline-block;
}

overflow:hidden will not work as there is text contained in the table that needs to be visible.

I figure it's a pretty straightforward issue, but if you need more information, let me know.

Answer 1

OK I think this is what you're trying to do.

Click here for the example: JS FIddle

In order to get the children scrollable in the parent you have to set the overflow of the fixed element.

  overflow: auto;

In my example <div class="main"> is the parent and fixed element so the css looks like this.

 .main {
    background: black;
    width: 250px;
    height: 250px;
    padding: 40px;
    overflow: auto;
}

.child1 {
    width: 400px;
    height: 400px;
    background: red;
    padding: 20px;
}

p {
    float: right;
}

.child2 {
    width: 300px;
    height: 300px;
    background: green;
    padding: 40px;
    margin: 0 auto;
    margin-top:20px;
}