How can I get an absolutely-positioned div to extend outside its relativley-positioned parent, which has overflow: auto?

Your problem is the position:relative parent. Since you have that positioning on the element, the inner box will ALWAYS stay within the overflow (position:absolute is relative to the nearest positioned parent).

To avoid the issue, you can remove the “position:relative” from the outer div, and add a wrapper div with the “position:relative;”. You’ll have to then add the “top:0;” declaration to your inner div (you should always have that, actually).

The end result is one extra div, and it looks like this: (you can remove the “z-index:-1” style, I just added that so you can see the result better)

<div style="position:relative;border:1px solid blue;">
    <div style="height: 100px; width: 100px; background: red; overflow: auto;">
        if there is some really long content here, it will cause overflow, but the green box will not
        <div style="position:absolute; z-index:-1; left: 20px; top:0; height: 200px; width: 200px; background: green;">
        </div>
    </div>
</div>