Почему мой div останавливается слева при изменении размера

Раньше я узнал что-то интересное и попытался немного поиграть с ним, однако я заметил то, чего раньше не замечал.

Когда я изменяю размер окна над своей шириной div, он не сглаживает мой div, а останавливается слева и начинает скрываться справа.

После некоторых исследований я обнаружил, что ответы разных типов, такие как позиционирование, приведут к такому ведению, но, учитывая, насколько основным является мой код, кажется, не причина...

Вот мой код: http://jsfiddle.net/L9Srn/5/

<div id="container"></div>
#container {
    background: red;
    margin: auto;
}
var box= $('#container'),
    ratio= 0.363,
    height= 400;

box.height(height).width(height*ratio);