Div with scrollbar inside div with overflow:hidden

Question

So basically I have this div with height:400px and inside of it I have a div with dynamic height, what I want to do is if the div inside the main div exceeds 400px in height then it should have a scrollbar so I can scroll to the bottom of it. Can I do this in css or I need javascript ?

Answer 1

You need to use

overflow-y:auto

with your parent div container.

Js Fiddle Demo

Answer 2

试试这一行：

overflow-x:hidden;

Answer 3

The only good reason to do this is if you cannot modify the div with overflow:hidden and need a background color/border that resizes with content.

HTML

<div class="d1">

    <div class="d2">
          <div class="d3"> D3 will resize with content</div>
    </div>
</div>

CSS

.d1{height:400px; overflow:hidden}
.d2{height:400px; overflow:auto; }
.d3{background-color:#F00;}

Answer 4

Simply use this:

#container
{
    height: 400px;
    overflow-y: scroll;
}
.dynamic-height
{
    height: auto;
}

jsfiddle