JQuery ui resizable doesn't reach max-width

Question

I'm currently developing a site that has the ability to add checkboxes to an un-ordered list dynamically. In appending the 'li' to that list, the 'li' should be able to be dragged and resized within that 'ul' container. I have no problems in dragging the 'li' around by using jquery's draggable, however I'm currently experiencing issues with their resizable functionality.

Although the 'li' can be resized initially, once the draggable div ('ul') container is dragged further right on the screen, the 'li' hits an invisible wall upon being resizing again. The issue can be resolved by appending the 'li' to the outer div, although this is obviously wrong in the un-ordered list syntax.

Please could someone assist?

A simplified example of this issue - http://jsfiddle.net/DomH00/5pfN6/5/

Here's my javascript:

var numberOfCheckboxes = 1;

$('#dragWrapper1').draggable({
    grid: [10, 10],
    scroll: false,
    containment: ".tab_container"
});

$('#addChoice').click(function () {

var selectedDragObject = $('#dragWrapper1');    
var selectedDragObjectUl = selectedDragObject.get(0).firstChild;      

if ($("#choiceValue").val()) {

    var newSpan = $("<span />", {
       'class': "checkbox_span"
    });

    var newCheckbox = $("<input />", {
        name: "checkbox_response",
        id: "checkbox_response_" + numberOfCheckboxes,
        type: "checkbox",
        value: $("#choiceValue").val()
    });

    var labelForCheckbox = $("<label />", {
        "for": $(newCheckbox).id,
        text: $("#choiceValue").val(),
        "class": "checkbox_label",
        "id": "checkbox_label_" + numberOfCheckboxes
    });

    var newLi = $("<li>",
        {
            "class": "ui-state-default",
            "id": "checkbox_li_" + numberOfCheckboxes,
            "title": "Resize me"
        });

    $(newSpan).append(newCheckbox);
    $(newSpan).append(labelForCheckbox);

    $(newLi).append(newSpan);

    $('#choiceVariable1').append(newLi);

    $(newLi).resizable({
        containment: selectedDragObject,
        handles: "e",                
        minWidth: ($(newSpan).outerWidth(true) + 10),               
        scroll: false,               
    });        

    numberOfCheckboxes++;
    $("#choiceValue").val("");
}
});

CSS:

.tab_container {
    min-height: 150px;
    position: relative;
    border: 1px solid black;
    background-color: aqua;
}

.draggable {
    float: left;
    margin: 0;
    display: inline-block;
    position: relative;
    text-indent: 4px;
    padding: 6px;
    background-color: yellow;
}

.checkbox  {
    list-style-type: none;
    margin: 0;
    padding: 0px;
    margin-left: 0px;
    min-width: 300px;
    min-height: 50px;
    max-width: 980px;
}

ul{    
    display: block;
    list-style-type: none;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

HTML:

<div class="tab_container" title="Tab Container">
    <div class="draggable" id="dragWrapper1" title="I'm draggable">
        <ul class="checkbox" id="choiceVariable1"></ul>
    </div>        
</div>

<input type="text" id="choiceValue"/>
<input type="submit" value="Add" id="addChoice">

<p>Steps to reproduce:</p>
<ol>
    <li>Add some text into box and click Add</li>
    <li>See that you can resize the 'li' within the yellow container on the x axis</li>
    <li>Drag the yellow container to the right</li>
    <li>Resize the 'li' once more</li>
</ol>

Many Thanks

Answer 1

Seems to work fine just using "parent" as containment option value

Demo