How to make inner div with overflow:scroll stay inside outer div?

Question

I have a table within a div within another div, like this:

<div id="outer">
    <div class="inner">
        <h4>Search results</h4>
        <table>
            <tr><th>Internal user</th><th>External domain</th><th># in</th><th>Last in</th><th># out</th><th>Last out</th><th>Is member</th></tr>
            <tr><td>Person Name</td><td>company.com</td><td>10</td><td>20/07/2014 13:00</td><td>11</td><td>21/07/2014 11:00</td><td>No</td></tr>
            <!-- Lots more data rows -->
        </table>
    </div>
</div>

The table body is dynamically generated by javascript.
The outer div has position:fixed.
The inner div has overflow:scroll, and should always fill the outer div but never go outside its borders.

Additionally:

• If the outer div has bottom set to auto, the inner and outer divs should both expand to fit the entire table; or
• If the outer div has bottom set to any fixed value (e.g. "10px"), the inner div should remain within the outer.

Similar rules should apply to the width of both divs depending on whether I set the outer div right to either auto or a fixed value.

The plan is that I start with bottom:auto on the outer div while javascript generates the table body, so both divs expand to fit the table.
Then, after the table is complete, I compare the outer div's size to the viewport size. If the outer div's automatic size fits in the viewport, I leave it as auto, otherwise I set fixed values to make it fit in the viewport, and the user can scroll to see the rest of the table.

Is there any single set of CSS rules that will achieve this, when the only properties I change in javascript are on the outer div?

The closest I've got is to set both height:100% and width:100% on the inner div. The only problem with this is that the inner div's scrollbars go a few pixels outside the outer div.

I've also tried:

• Not setting any dimensions on the inner div. This makes it always size to the table, ignoring the size of the outer div; and
• Setting position:absolute and left/top/right/bottom all to 0 on the inner div. This makes both divs go to zero size when the outer div's size is auto.

This would be simpler with only one div instead of two, but two borders of different colours provide better contrast in the web application this is designed for.

Here's a JSFiddle: http://jsfiddle.net/jr5R2

Answer 1

There need to add height: 100% to both outer and inner div

DEMO

#outer {
    display: block;
    position: fixed;
    left: 1px;
    top: 40px;
    width: auto;
    right: auto;
    bottom: auto;
    z-index: 1000;
    border: 2px solid silver;
    height: 100%;
}
#outer .inner {
    background-color: white;
    border: 1px solid black;
    padding: 2px;
    overflow-y: scroll;
    height: 100%;     
}