how to hide scrollbar even if div is not larger then max-height

Question

i have a div named panel, CSS of whose is

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

now even if height of panel is not larger than the max-height, i am getting the scrollbar visible(you can see in the pic). I want scrollbar visible only if max-height is attained.

i tried javascript, but can it be done only in css

Answer 1

Set the overflow-y property to auto

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

Answer 2

Set overflow-y to auto which removes the vertical scroll and it will appear only if the content exceeds your max-height of 200px...

.msg_panel
{
  overflow-y:auto;
}