如果属性溢出设置为可见，为什么子元素被隐藏？

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的visibility属性或#makeThisVisible的position：absolute属性，但是我想找到另一个更好的方法来解决问题。

请帮忙！
非常感谢。