xbonez xbonez - 6 months ago 148
CSS Question

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

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

Answer

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/