scrolloverflowcss

CSS max-height and overflow auto always displays vertical scroll

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.

Solution

  • 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