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

Question

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>

Answer 1

If you make

overflow: hidden in the outer div and overflow-y: scroll in the inner div it will work.

http://jsfiddle.net/C8MuZ/11/

Answer 2

This would work just fine, set the height to desired pixel

#inner-right{             height: 100px;             overflow:auto;             }