Evitar que un elemento se corte cuando están dentro de un elemento "desbordamiento: oculto"

Question

Estoy usando el truco de CSS de alturas iguales como se describe en este page.

Todo estaba funcionando bien hasta hoy cuando necesito agregar un cuadro de diálogo dentro de una de las columnas, que está absolutamente posicionado para sacarlo del flujo. El problema es que dado que el contenedor tiene "desbordamiento: oculto" en él, el diálogo se interrumpe cuando se desborda.

Además de llevar el diálogo fuera del elemento contenedor, ¿hay alguna forma de que se muestre mediante CSS?

Aquí hay un pequeño ejemplo que demuestra lo que he mencionado.

<style> 
.container { overflow: hidden; margin-top: 30px } 
.col { 
    float: left; 
    padding-bottom: 2000px; 
    margin-bottom: -2000px; 
    border-right: 1px solid black; 
    width: 100px; 
    background-color: grey; 
} 
.col.third { border-right: none } 

#div-a { position: relative } 
#div-b { 
    position: absolute; 
    background-color: red; 
    width: 35px; 
    height: 350px; 
    bottom: 0; 
    right: 0; 
    margin: 5px; 
    border: 2px solid black; 
} 
</style> 

<div class="container"> 
    <div class="col first"> 
     <p style="height: 100px">One</p> 
    </div> 
    <div class="col second"> 
     <p style="height: 300px">Two</p> 
     <div id="div-a"> 
      <!-- this gets cut off by the "overflow: hidden" on div.container --> 
      <div id="div-b"> 
       Foo 
      </div> 
     </div> 
    </div> 
    <div class="col third"> 
     <p style="height: 200px">Three</p> 
    </div> 
</div> 

ves que div#div-b se corta en la parte superior cuando se desborda en el elemento div.container.

Answer 1

Lamentablemente, lo que quiere hacer es imposible sin que el diálogo salga del elemento contenedor.

Su mejor opción es hacer que el elemento de diálogo sea un hermano del contenedor y colocarlo de esa manera.

Answer 2

Desafortunadamente no ... No creo que haya una forma de eludir el desbordamiento: oculto con la posición absoluta. Puedes experimentar con la posición: fija, pero no te posicionarás en las mismas condiciones si la usas.

Answer 3

Una opción sería colocar el contenido de su desbordamiento: contenedor oculto en un sub-contenedor (un div infantil tal vez). Luego, haga que el sub-contenedor coincida con las dimensiones del contenedor y mueva el desbordamiento: oculto desde el contenedor al sub-contenedor.

Luego, puede hacer que el diálogo sea un elemento secundario del contenedor (un hermano del sub-contenedor), y ahora existirá en un elemento que NO tenga overflow: hidden.

No he probado esto, y eliminar el desbordamiento: oculto del contenedor puede romper su diseño. Si ese es el caso, sugeriría hacer lo que otros tienen y mover el cuadro de diálogo fuera del contenedor por completo. Esto podría incluso hacerse a través de Javascript si no tiene la opción de colocar el código del cuadro de diálogo en otro lugar. (Javascript podría hacer que el cuadro de diálogo sea un elemento secundario de BODY o de alguna otra etiqueta cuando lo necesite)