Tengo un div relativamente posicionado, que tieneoverflow: auto set. Dentro de eso, tengo un div que actúa como una especie de menú desplegable. Quiero que el div desplegable se extienda fuera del padre cuando sea necesario, pero se está recortando, ya que el padre tieneoverflow: auto.

Me doy cuenta de que este es el comportamiento correcto, pero no estoy seguro de cómo lograr lo que quiero. Aquí hay un ejemplo de HTML que ilustra el problema:

<div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;">  

    <div style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background: green;">
    </div>

</div>

own div es contextualmente relevante para el otro contenido enoverflow: auto div, por lo que tiene sentido mantenerlos juntos. Supongo que podría usar javascript para mover el div desplegable a otra parte del DOM, pero prefiero no hacerlo si puedo evitarlo.