IE8 overflow:auto with max-height

internet-explorer-8 overflow css
Rytis picture Rytis · Aug 11, 2008 · Viewed 68.6k times · Source

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, hoping for scrollbars to appear when the content does not fit.

It all works fine in Firefox and IE7, but IE8 behaves as if overflow:hidden was present instead of overflow:auto.

I tried overflow:scroll, still does not help, IE8 simply truncates the content without showing scrollbars. Changing max-height declaration to height makes overflow work OK, it's the combination of max-height and overflow:auto that breaks things.

This is also logged as an official bug in the final, release version of IE8

Is there a workaround? For now I resorted to using height instead of max-height, but it leaves plenty of empty space in case there isn't much data.

Answer

Jeff Atwood picture Jeff Atwood · May 19, 2009

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.

Related questions

IE 8 absolute positioned element outside its parent clipping problem

I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does …

Read More
What do I need to do to get Internet Explorer 8 to accept a self signed certificate?

We use self signed certificates on our intranet. What do I need to do to get Internet Explorer 8 to accept them without showing an error message to the user? What we did for Internet Explorer 7 apparently isn't working. EDIT: Internet …

Read More
HTML embedded PDF iframe

I have used the tag to embed a pdf file. <iframe id="iframepdf" src="files/example.pdf"></iframe> This works fine in Chrome, IE8+, Firefox etc, but for some reason, when some people are viewing it …

Read More