CSS max-height not working

Question

I have a very simply problem where I need a div to expand to fit its contents unless the height reaches a certain size, when I want the div to scroll vertically instead. As a test, I created a page containing:

<div style="width:300px;max-height:25px;background-color:green;overflow:auto;">
    1<br />
    2<br />
    3<br />
    4<br />
    5
</div>

Unfortunately, the max-height doesn't seem to work. What am I doing wrong?

I am using IE7.

Answer 1

The problem is your browser. Maybe you could wrap this div in another div that has the fixed height of 25px. Of course this wouldn't be exactly the same as max-height.

An article about a solution.

Edit: According to Microsoft it should work in IE7+.

Have you set an appropriate doctype? If not IE7 uses an old layout engine. You should use HTML 4 or XHTML.

Answer 2

Here's the cross-browser way to set min-height:

min-height: 400px;
height:auto !important;
height:400px;

IE treats the height attribute as min-height, and ignores min-height.

Edit: Misread the question as min-height! (>_<)