Posição absoluta e estouro oculto

Temos dois DIVs, um incorporado no outro. Se o DIV externo não estiver posicionado absoluto, o DIV interno, que está posicionado absoluto, não obedecerá ao estouro oculto do DIV externo ( exemplo ).

Existe alguma chance de fazer com que o DIV interno obedeça ao estouro oculto do DIV externo sem definir o DIV externo para a posição absoluta (causa que estragará todo o nosso layout)? Também a posição relativa para nossa DIV interna não é uma opção, pois precisamos "crescer" de uma tabela TD ( exemplo ).

Existem outras opções?

Faça exterior <div>para position: relativee interior <div>para position: absolute. Isso deve funcionar para você.

E position: relativea div externa? No exemplo que oculta o interior. Ele também não o moverá em seu layout, pois você não especifica uma parte superior ou esquerda.

Um elemento absolutamente posicionado é realmente posicionado em relação a um relativepai ou ao pai parente encontrado mais próximo. Portanto, o elemento com overflow: hiddendeve estar entre relativee absoluteelementos posicionados:

<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; 
}

Você apenas faz divassim:

<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 o ajude :)