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

[StaR]

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 \[code\]#inner-right\[/code\] div within the \[code\]#right-col\[/code\] div, I want a scrollbar to appear for \[code\]#inner-right\[/code\] only. My current code shows two scrollbars: \[code\]#inner-div\[/code\] and \[code\]#right-col\[/code\]. If I change the CSS on \[code\]#right-col\[/code\] to \[code\]overflow: hidden\[/code\] so as to get rid of the outer scroll-bar, the inner scroll bar disappears as well, and \[code\]#inner-right\[/code\] no longer respects the \[code\]max-height\[/code\] rule.How can I set it up such that the scroll bar only shows up on \[code\]#inner-right\[/code\] when it's contents grow too large.JSFiddle\[code\]<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>\[/code\]CSS\[code\]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;}\[/code\]