Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 521
lightningmanic Avatar asked Apr 20 '12 18:04

lightningmanic


1 Answers

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

like image 166
lightningmanic Avatar answered Jan 01 '23 19:01

lightningmanic