JQuery UI resize issue

Question

Simple situation - two div's and one div which is the box. The outer div is scrollable. The div.box is resizable (w,e). When i try to resize from Right to Left the div.box is collapsed to width:0px.

Live example here: code

I already read everything about jquery-ui resizable, but can't find the solution for me. I'll appreciate any help.

HTML:

<div class="container-scroll">
    <div class="container">
        <div class="box"></div>
    </div>
</div>

CSS:

.container-scroll {
    display:block;
    width:500px;
    height:100px;
    overflow:scroll;
    border:1px solid #666;
}
.container {
    display:block;
    position:relative;
    width:1000px;
    height:100px;
    padding:20px 0;    
    background-color:#eee;
}
.box {
    display:block;
    position:absolute;
    width:1000px;
    left:0;
    /*right:0;    */
    height:50px;
    background:red;
}

Javascript:

$('.box').resizable({
    containment: 'parent',
    handles: 'w, e',
    grid: [10,10]
});

Answer 1

Removing your containment call fixes the issue and it's redundant either way as far as I can see:

$('.box').resizable({
    handles: 'w, e',
    grid: [10,10]
});

EDIT

Taking into account your comment then, your best bet is probably to use the 'maxWidth' option and set this to the width of your container like so (using the width in the fiddle as an example).

$('.box').resizable({
    maxWidth: 1000,
    handles: 'w, e',
    grid: [10,10]
});