I have my HTML, CSS set up as per the code below. I have also added a JSFiddle link since it will be far more convenient to see the code in action.

The problem I'm having is that when there is a lot of text in the `#inner-right` div within the `#right-col` div, I want a scrollbar to appear for `#inner-right` **only**. My current code shows two scrollbars: `#inner-div` and `#right-col`. If I change the CSS on `#right-col` to `overflow: hidden` so as to get rid of the outer scroll-bar, the inner scroll bar disappears as well, and `#inner-right` no longer respects the `max-height` rule.

How can I set it up such that the scroll bar only shows up on `#inner-right` when it's contents grow too large.

[**JSFiddle**](http://jsfiddle.net/C8MuZ/10/)

```css
html, body {
    height: 100%;    
}
#wrapper {
    height: 100%;
    display: table;
    width: 700px;
}
#header, #footer {
    display: table-row;
    height: 30px;
}
#body {
    height: 100%;
    display: table-row;
    background: rgba(255, 0, 0, 0.5);
}
#left-col, #right-col {
    display: inline-block;
    width: 320px;
    height: 100%;
    max-height: 100%;
    margin-right: 20px;
    border: 2px black solid;
    vertical-align: top;
    padding: 3px;
    overflow: auto;    
}
#inner-right {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    background: ivory;
}
```

```html
<div id="wrapper">
    <div id="header">Header</div>
    <div id="body">
        <div id="left-col">
            Lorem ipsum ... little text
        </div>
        <div id="right-col">
            <div id="header-text">Header</div>
            <div id="inner-right">
            Lorem ipsum ...lots of text
            </div>
        </div>
    </div>
    <div id="footer">Footer</div>
</div>
```