How to hide scrollbar even if div is not bigger than max-height

Question

I have a div name bar whose CSS

.msg_panel { width:100px; height:45px; max-height:200px; padding: 3px; overflow-y:scroll; overflow-x:hidden; } 

now, even if the height of the panel does not exceed the maximum height, I get the visibility of the scroll bar (you can see in the figure). I want the scroll bar to be visible only if the maximum height is reached.

I tried javascript, but this can only be done in css

Answer 1

Set the overflow-y property to auto

Working example http://jsfiddle.net/TLwcX/1/

Answer 2

You explicitly stated that you always need vertical scrolling: overflow-y: scroll;

To let the browser decide when to show scrolling, use this: overflow-y: auto;

Answer 3

Set overflow-y to auto, which removes vertical scrolling, and only appears if the content exceeds a maximum height of 200px ...

 .msg_panel { overflow-y:auto; }