jQuery UI Resizable elements are jumping up when resizing

I have a code with some resizable divs which are positioned absolute in another div container that is positioned related. These divs have top specified to Y. When I start resizing these divs, they simply jump up; this behaviour doesn’t happen if divs are around the middle of the screen.


#container {
	width: 500px;
	height: 500px;
	overflow: scroll;
	vertical-align:top;
	position: relative;	
}
.myDiv {
	width: 200px;
	margin: 0px;
	height: 30px;
	position: absolute;
	z-index: 500;
	background-color: blue;
	border: 1px solid red;
        top: 300px;
        left: 20px;
}


    <div id='container'>
        <div class='myDiv'></div>
        <div class='myDiv' style="top: 550px;"></div>
        <div style="height:600px;" id="forcedHeight"></div>
    </div>


$('.myDiv').resizable();

However, when I disable the overflow of the container, resizing works perfectly; it is only when the container scroll the overflow that the div do this weird behavior. Any idea?

Thanks