Comment rendre un élément enfant visible si le parent est overflow:hidden ?

Question

J'ai un élément enfant avec overflow:visible; et l'élément parent avec overflow:hidden; . L'élément enfant a une hauteur supérieure à celle de l'élément parent.

Pourquoi l'élément enfant est caché s'il possède la propriété débordement réglé sur 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;
}

Le violon : http://jsfiddle.net/ewNbu/

Pour résoudre ce problème, je ne veux pas utiliser la propriété de visibilité pour #container ou la propriété position:absolute pour #makeThisVisible mais je veux trouver une autre meilleure façon de résoudre le problème.

Aidez-moi ! Merci beaucoup.

Answer 1

Vous pouvez essayer de jouer avec :

position:absolute;

qui fait sortir l'enfant de la portée de l'élément parent.

DEMO