IE8 overflow:auto with max-height

Question

I have an element which may contain very big amounts of data, but I don\'t want it to ruin the page layout, so I set max-height: 100px and overflow:auto

Answer 1

Set max-height only and don't set the overflow. This way it will show scroll bar if content is more than max-height and shrinks if content is less than the max-height.

Answer 2

This is a really nasty bug as it affects us heavily on Stack Overflow with <pre> code blocks, which have max-height:600 and width:auto.

It is logged as a bug in the final version of IE8 with no fix.

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

There is a really, really hacky CSS workaround:

http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

/*
SUPER nasty IE8 hack to deal with this bug
*/
pre 
{
    max-height: none\9 
}

and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.