IE8 overflow:auto with max-height

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.

internet-explorer-8 overflow css

Edit Report

1 Answer

I saw this logged as a fixed bug in RC1. But I've found a variation that seems to cause a hard assert render failure. Involves these two styles in a nested table.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
    .calendarBody
    {
        overflow: scroll;
        max-height: 500px;
    }
    </style>
</head>
<body>
    <table>
    <tbody>
        <tr>
        <td>
            This is a cell in the outer table.
        <div class="calendarBody">
            <table>
                <tbody>
                <tr>
                    <td>
                    This is a cell in the inner table.
                </td>
                    </tr>
            </tbody>
                </table>
        </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

answered 2009-03-20T22:15:05.493

IE8 overflow:auto with max-height

1 Answer

Your Answer