Chrome scrollbar error

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    $(function(){
        $("#destroy").click(function(){
            $(".bar").remove();
        });
        $("#create").click(function(){
            $("#foo").append('<div class="bar"></div>');
        });
    })
</script>
<html>
<head>
    <style>
        body{
            width:100%;
        }
        #foo{
            height:1024px;
            background-color:black;
        }
        .bar{
            height:2024px;
            background-color:gray;
        }
    </style>
</head>
<body>
    <button id="destroy">Destroy</button>
     <button id="create">Create</button>
    <div id="foo"></div>
</body>
</html>