Set max-height on inner div so scroll bars appear, but not on parent div

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 ``` 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; } ``` ``` <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> ```