multiple resizables acting strange

I'm trying to place multiple resizable and draggable div's on one page that move (vertically) inside their own parent div. you can take 开发者_C百科a look at http://bit.ly/bCutBE

However, these div's act really strange when I want to resize them, especially from the north side, they kind of move out of the screen very fast, while they shouldn't be able to get outside the parent div. I only want the div to be able to move and resize vertically inside it's parent, the dragging-part works pretty good, but the resize part give this problem.

I can't really describe it better than this, but take a look for yourself and it will be clear immediately when you try to resize one of the coloured div's: move it a little downwards and try to resize it from the north side.

the problem seems to be caused by the containment: 'parent', line of the resizable. when I delete this line it works fine, but then the coloured blocks don't stay in their parent, and I want them to stay inside their parent.

I hope someone can help me with this...

the jquery code I used:

$(document).ready(function(){
            $(".move")
                .draggable({
                    containment: 'parent', 
                    grid: [50,50],
                    axis: 'y'
                })
                .resizable({
                    containment: 'parent', 
                    grid: [50,50],
                    handles: 'n, s', 
                    minHeight: 50 
                });
        });

this seems to be a bug with draggable and sortable you will find a workaround here