Größe (width) abhängig von Großelternelement (grandparent)

[payx]

Hallo,

vielleicht hat jemand eine Lösung für das folgende (scheinbar) einfache Problem:

Ich habe drei verschachtelte divs, von denen das erste (grün) sich am viewport orientiert und das zweite (orange/gelb) eine fixe über den viewport hinausgehende Breite hat. Das dritte (blau) hat 100% Breite und richtet sich dabei korrekterweise nach dem zweiten, überbreiten div.

Frage: Wie kann ich erreichen, dass das dritte div (blau) seine Breite am ersten div (grün) ausrichtet und also in diesem Beispiel vollständig zu sehen ist?

<div                      style="width:80%;overflow:scroll;         padding:10px;border:1px solid green;background-color:lightgreen">
                                                                    01 GR&Uuml;N
        <div              style="width:2800px;                      padding:10px;border:1px solid orange;background-color:yellow">
                                                                    02 ORANGE
                <div      style="width:100%;                        padding:10px;border:1px solid blue;background-color:lightblue">
                                                                    03 BLAU
                </div>
        </div>
</div>

(Kleine Unterschiede zwischen den Browsern sind erstmal irrelevant.)

Dank und Gruß
payx