CSS display a vertical scroll bar into a div

Question

I do want to display a scrollbar inside a table ( within a div ):

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

...

    </div>

The problem is that the div have the default height already 150px. I want it to have no height defined from the start, and when the div reaches 150px, the scroll-bar to appear. How can I achieve this?

Answer 1

You can do that with max-height instead of height. It will trigger the scroll-bar once it will reach the 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;
}