Как сделать дочерний элемент видимым, если родительский элемент переполнен: скрыт?

У меня есть дочерний элемент с overflow:visible; и родительский элемент с overflow:hidden;. Детский элемент имеет высоту выше родительского элемента.

Почему дочерний элемент скрыт, если для свойства переполнения установлено значение видно?

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 property для #makeThisVisible, но я хочу найти другой лучший способ решить проблему.

Пожалуйста, помогите! Большое вам спасибо.