IE7 CSS Scrolling Div Bug

Question

I recently came across an IE7 only bug that I thought I'd share so when I come to this site 6 months from now to figure out the same thing, I'll have it on hand.

I believe the easiest way to recreate this bug would be the following:

<div style="overflow: auto; height: 150px;">
    <div style="position: relative;">[...]</div>
</div>

In IE7, the outer div is a fixed size and the inner div is relatively positioned and contains more content (assuming the inner div causes an overflow). In all other browsers, this seems to work as expected.

Answer 1

The easiest fix would be to add position: relative; to the outer div. This will make IE7 work as intended.

(See: http://rowanw.com/bugs/overflow_relative.htm).