Jquery UI Resizable() right side bug

When resizing a div with the handle on the 'westside' attached to the right side of the browser window. strange behavior.

by salitrapraveen

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div id="content">
<div id="topDiv">
    This is top div element.
</div>
    <div id="bottomDiv">
    This is bottom div element.
</div>
</div>

CSS

#content {
        height: 400px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
    }    
#topDiv, #bottomDiv {
        outline: solid 1px #ccc;
        overflow: auto;
    }
    #topDiv {
        height: 20%;
        resize: vertical;
     }
    #bottomDiv {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        box-flex: 1;
    }