IE7 CSS Scrolling Div Bug

Question

I recently encountered an IE7 bug that I thought I would share, when I arrive at this site in 6 months to understand the same thing, I will have it at hand.

I believe that the easiest way to recreate this error would be the following html on the page with the declared doctype (it works correctly in quirks / no-doctype mode):

<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 overflow). In all other browsers, this works as expected.

Screenshot:

Answer 1

The simplest fix is ​​to add position: relative; to the outer div. This will make IE7 work as intended.

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

EDIT: Cache version of a broken link to waybackmachine.org