css - ocultar - title tag html

¿Cómo hacer que un elemento secundario sea visible si el elemento primario está desbordado: oculto?

Question

Tengo un elemento hijo con overflow:visible; y el elemento padre con overflow:hidden; . El elemento hijo tiene una altura más alta que el elemento padre.

¿Por qué el elemento secundario está oculto si el desbordamiento de propiedades está establecido en visible ?

HTML:

<div id="container">
    <div id="makeThisVisible"></div>
    <div id="thisRemainsHidden"></div>
</div> 

CSS:

#container {
    width: 500px;
    height: 100px;
    border: 1px solid black;
    background: Gray;
    /*OVERFLOW*/
    overflow: hidden;
}
#makeThisVisible {
    width: 240px;
    height: 300px;
    float: left;
    border: 1px solid red;
    background: IndianRed;
    /*OVERFLOW*/
    overflow: visible;
    margin-left: 8px;
}
#thisRemainsHidden {
    width: 240px;
    height: 300px;
    float: left;
    border: 1px solid teal;
    background: DarkCyan;
}

El violín: http://jsfiddle.net/ewNbu/

Para resolver este problema, no quiero usar la propiedad de visibilidad para #container o posición: propiedad absoluta para #makeThisVisible , pero quiero encontrar otra forma mejor de resolver el problema.

¡Por favor ayuda! Muchas gracias.

Answer 1

Puedes intentar jugar con:

position:absolute;

lo que quita al niño fuera del alcance del elemento padre.

DEMO