css - 親がoverflow:hiddenの場合に子要素を表示する方法は?

Question

の子要素overflow:visible;と の親要素がありoverflow:hidden;ます。子要素の高さが親要素よりも高くなっています。

プロパティのオーバーフローが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;
}

フィドル: http://jsfiddle.net/ewNbu/

この問題を解決するために、 の可視性プロパティ#containerまたは position:absolute プロパティを使用したくありません#makeThisVisibleが、問題を解決するための別のより良い方法を見つけたいと考えています。

助けてください！どうもありがとう。