html – 在内部div上设置max-height,所以滚动条出现,但不在父div上

我有我的 HTML,CSS按照下面的代码设置.我还添加了一个JSfiddle链接,因为它将更方便地查看代码.

我遇到的问题是,当#right-col div中的#inner-right div中有很多文本时,我想要一个滚动条仅出现在#内右边.我当前的代码显示了两个滚动条：#inner-div和#right-col.如果我将#右键上的CSS更改为overflow：hidden,以便摆脱外部滚动条,内滚动条也会消失,而#inner-right不再符合max-height规则.

如何设置它,使滚动条仅在#内右边显示,当内容增长太大时.

JSFiddle

<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>

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

解决方法

如果你做

overflow：隐藏在外部div和overflow-y：在内部的div中滚动它将工作.

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