滚动条出现时jQuery窗口大小调整问题

当我显示页面index.php时，仅显示div id .box的4列，而不是5列。另一方面，当我最小化和最大化window时，将显示THE div id .box的5列。我花了大约4个小时，但我发现当我使用putover：auto;方法时一切都很好。到#panel我把overflow：scroll;。然后一切都很好。在页面加载时，我得到所有5列，而在最小化和最大化窗口中，我也得到了5列。但是我不想让这个栏从#kontener的底部溢出：滚动。还有另一种方法吗？我投票 谢谢！/ edit我忘了说，如果页面上只有一些方框，直到滚动条出现之前，方框不多，那一切都很好。

无法正常运行的示例：http : //jsfiddle.net/MtUWn/509/

我有以下代码：style.css

#panel{position:absolute;top:72px;left:0px;right:0px;bottom:50px;overflow:auto;}/*overflow:scroll;*/
    #kontener{overflow:hidden;}
    .box {display:block;float:left;}
    .box_in {margin:5px;padding:5px;height:260px;border:1px solid grey;}

index.php

<script type="text/javascript">

    function onResize() {
        var cw = $('#kontener').width();
        $(".box").width(cw / 5);
    }

    $(window).load('resize', onResize);
    $(window).bind('resize', onResize);

</script>

<div id="panel">    
    <div id="kontener">
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
        <div class="box"><div class="box_in">Box</div></div>
    </div>
</div>