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.
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! (>_<)
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.
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.
Your code works for me.
When I wrap it with a page!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>1 2 3 4 5</title>
</head>
<body>
<div style="width:300px;max-height:25px;background-color:green;overflow:auto;">
1<br />
2<br />
3<br />
4<br />
5
</div>
</body>
</html>
Works in IE7 and Chrome fine.
FF3 is not giving me scrolls bars.
But the max height works fine in all three.
Without the surrounding page though your snippet of code does not work. I suggest testing code in a valid page of HTML. * grins *