html下拉菜单不改变父元素高度,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规则.

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

Header

Lorem ipsum ... little text

Header

Lorem ipsum ...lots of text

Footer

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;

}