CSS displays vertical scrollbar in div

Question

I want to display a scroll bar inside a table (inside a div):

    <div style="width:789px; height:150px; overflow:auto;">

...

    </div>

The problem is that the div has a default height of already 150 pixels. I want it to not have the height defined from the very beginning, and when the div reaches 150 pixels, a scroll bar will appear. How can I achieve this?

Answer 1

You can do this with help max-heightinstead of height. It will start the scroll bar as soon as it reaches max-height.

CSS

<div style="width:789px; max-height:150px; overflow:auto;">

...

</div>

Answer 2

check this fiddle , it should show you how to archive this

.box{
    width: 100px;
    height: 50px;
    overflow: auto;
    border: 3px solid green;
}
.content{
    width: 1000px;
    height: 30px;
    background: red;
}

Answer 3

css max-height

div {
    overflow: auto;
    max-height: 150px;
}

JSFIDDLE. .