Show end of resized element in container with overflow while resizing

Question

This question may sound weird, sorry if it does not make much sense... I have a resizable element inside a container that has overflow:scroll. If I resize the element, the mouse finally leaves the container and the scrollbar starts growing. This is not ideal for my purposes because I need to view the endpoint of the resized element permanently. Is it possible to keep the mouse inside the container while nonetheless resizing so that I can see the end of the resized element all the time?

<script src="Scripts/jquery-1.10.1.min.js"></script>
<script src="Scripts/jquery-ui.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $("#child").resizable({
            resize: function (event, ui) {

            },
            start: function (event, ui) {
                $("#child").css({
                    position: "relative !important",
                    top: "0 !important",
                    left: "0 !important"
                });
            },
            stop: function (event, ui) {
                $("#child").css({
                    position: "",
                    top: "",
                    left: ""
                });

            }
        });
    });

</script>

<style type="text/css">

    #parent { width:250px; height:250px; background-color:yellow; border: 1px solid gray; position:relative; overflow-y:scroll; }
    #child { width:220px; height:220px; background: rgba(200, 54, 54, 0.5); border: 1px solid gray; top:0px;  }

    .ui-resizable { position: relative;}
    .ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
    .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
    .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
    .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
    .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
    .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
    .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
    .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
    .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
    .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
</style>

<form id="form1" runat="server">
<div>      
    <div id="parent">
        <div id="child"></div>
    </div>            
</div>
</form>

Answer 1

You can't force the mouse to stay inside the parent, but you can automatically scroll to see the bottom right corner of the child when resizing it :

resize: function (event, ui) {
    $('#parent').scrollTop($('#child').height());
    $('#parent').scrollLeft($('#child').width());
}

See this Fiddle