JQuery UI 调整大小问题

Question

简单的情况 - 两个 div 和一个 div(即盒子)。 外部 div 是可滚动的。 div.box 的大小可以调整 (w,e)。 当我尝试从右向左调整大小时，div.box 折叠为宽度:0px。

此处的实例:code

我已经阅读了有关 jquery-ui 可调整大小的所有内容，但找不到适合我的解决方案。 我将不胜感激任何帮助。

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

删除你的收容调用可以解决这个问题，而且据我所知，无论哪种方式都是多余的:

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

编辑

考虑到您的评论，您最好的选择可能是使用“maxWidth”选项并将其设置为容器的宽度，如下所示(使用 fiddle 中的宽度作为示例)。

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