Posición absoluta y desbordamiento oculto

Tenemos dos DIV, uno incrustado en el otro. Si el DIV externo no está en posición absoluta, entonces el DIV interno, que está en posición absoluta, no obedece al desbordamiento oculto del DIV externo ( ejemplo ).

¿Hay alguna posibilidad de hacer que el DIV interno obedezca el desbordamiento oculto del DIV externo sin configurar el DIV externo en posición absoluta (porque eso arruinará nuestro diseño completo)? Además, la posición relativa para nuestro DIV interno no es una opción, ya que necesitamos "crecer" de una tabla TD ( ejemplo ).

¿Hay más opciones?

Hacer exterior <div>a position: relativee interior <div>a position: absolute. Debería funcionar para ti.

¿Qué pasa position: relativecon el div externo? En el ejemplo que esconde el interior. Tampoco lo moverá en su diseño ya que no especifica una parte superior o izquierda.

Un elemento posicionado absolutamente se posiciona con respecto a un relativepadre, o el padre relativo encontrado más cercano. Así el elemento con overflow: hiddendebe estar entre relativey absoluteelementos de posicionado:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Simplemente haces divs así:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

Espero que este código te ayude :)