problem with resizing

problem with resizing

Hi,
I have trouble with this code:
 
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>

<style>
.box {
width: 50px;
height: 50px;
border: 1px solid black;
cursor: move;
}

#viewarea {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
</style>

<script>
$(function(){
  $('#viewarea').resizable();
  $('.box').resizable().draggable(); 
});

</script>
</head>

<body>
<div id="viewarea">
  <div class="box">BOX</div>
</div>
</body>


if I want to resize div viewarea, it isn't possible. But if I change css style of viewarea to
overflow: hidden;

I can resize the div viewarea...