CSS max-height and overflow auto always displays vertical scroll

cssoverflowscroll

I have a div class set up with the following CSS style:

div.multiple_choice{
    border: 1px solid black; 
    max-width: 300px; 
    max-height: 200px; 
    overflow: auto;
}

The problem is, when the text inside doesn't force the DIV to reach the maximum height of 200px, the vertical scroll bar still shows up. I can click on the up and down arrows but it only moves the contents up and down by about a pixel or two.

This is occuring in Google Chrome (version 18.0) and Iceweasel 11.

Best Answer

As it turns out, another CSS style was causing the issue:

body{
    line-height: 1;
}

Anyone interested in learning about how and why this would cause an issue, can read about the line-height property here

Related Topic