'How to show scroll after certain height but height should not be fixed?

I have a div with following style: height:250px;scroll:auto;. I want it to scroll after 250 px but should have height according to the content in it.

For example, if the content in it is 100px, then, the height of div should be 100 without scroll. But, if the height exceeds 250px, it should show scroll.

How can do it?

csshtmlscroll


Solution 1:[1]

Is this what you are after?

Demo

CSS:

.dyn-height {
    width:100px;
    max-height:250px;
    overflow-y:scroll;
}

height: optional - just for the demo.

Solution 2:[2]

try this: max-height should do the trick.

html

<div class="height">
    blah<br/>
    blah<br/>
</div>

css:

.height { max-height:250px; border:1px solid red; overflow:auto; }

Solution 3:[3]

Use overflow-y with the auto option. This way the scroll bar will not show up until it is needed. Otherwise the scroll bar will display, even if you do not need it to show.

 .my_div {
        width:100px;
        max-height:250px;
        overflow-y:auto;
    }

Solution 4:[4]

just try max-height and do overflow-y:scroll just it

.hidden {
width:100px;
max-height:250px;
overflow-y:scroll;

}
<div class="hidden">

<h5>If the content in this div exceeds 250px it should appear a scroll bar</h5>

</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Myles Gray
Solution 2 Mauro
Solution 3
Solution 4 Mazen Mohsen

Related Questions