Jquery-ui 可调整大小的功能无法与 flexbox 一起正常工作 div

Question

我正在尝试创建两个 divs，其中一个可调整大小，另一个占用父容器中剩余的可用 space，该父容器包含两个 divs。

使用 flexbox 模型，我将两个 divs 并排放置，并给左边的一个 50% 和右边的 flex: 1 所以它需要可用 space.

然后我在左边的div上使用了jquery-ui resizable函数。但是当我向左调整 div 的大小时，它只会在鼠标拖动时减少而不会增加，右边的 div 也不会减少..

我正在尝试归档类似于 codepen 的东西，其中有多个可调整大小的 div 垂直或水平排列

这是我的代码

HTML

<div class="wrapper">
   <div class="left-div" id="resizable"></div>
   <div class="right-div">
</div>

CSS

.wrapper{
    width: 100%; // 100% of the body
    height: 100vh; // take the entire view-port height
    display: flex;
}

.left-div{
    position: relative
    width: 50%; // 100% of the parent div(wrapper)
    height: 100%;
}

.right-div{
    position: relative
    flex: 1;
}

JS

$(document).ready(function () {
    $("resizable").resizable({
        handles: "e",
        autoHide: true,
        maxWidth: ""
    });
})

Answer 1

$(document).ready(function () {
    $("#resizable").resizable({
      resize: function(event, ui) {
          ui.size.height = ui.originalSize.height;
      }
    });
})

看看这个CodePen

我添加了一个功能来锁定沿 Y 轴的可调整大小。

此外，记得在 id 选择器之前添加 #。

Jquery-ui 可调整大小的功能无法与 flexbox 一起正常工作 div

Jquery-ui resizable function not working proparly with a flexbox div

javascript

jquery-ui

flexbox

jquery-ui-resizable