Resizable div in a resizable div issue

Resizable div in a resizable div issue

Hi all,
i'm new about jqueryui but i'm having a lot of fun with it.

Until now... :-)
I cannot understand why i cannot have a resizable div in a resizable div.
This is the example.
  1.    <style>       
            .demo
            {
                width: 150px;
                height: 150px;
                padding: 5px;
                position: absolute;
                top: 150px;
                left: 200px;
            }
            .fence
            {
                width: 350px;
                height: 450px;
                padding: 5px;
                position: absolute;
                border-width: medium;
                border-style: dashed;
                border-color: Gray;
                background-color: #fafafa;
                left: 0px;
                top: 0px;
            }         
        </style>
    </head>
    <body>
        <div id="container">
            <div class="fence" name="fence1">
                <div class="demo" style="background-color: Orange;" name="alfa">
                              </div>
            </div>
            
        </div>
    </body>
    <script type="text/javascript"> 
        $(function () {
            $('.demo').draggable().resizable();
            $('.fence').draggable().resizable().droppable();
       });
    </script>
    </html>







































i'm gonna crazy.
Try if you want on jsfiddle. Fence div cannot be resized.
If i remove the div (demo) inside the "fence" it works.
Why?
I will be very happy if you can help me about this issue.... thank you very much.