Jquery-ui可调整大小的函数不适用于flexbox div

Question

我正在尝试创建两个divs，其中一个是可调整大小的，另一个在占据两个divs的父容器中占据剩余的可用空间。

使用flexbox模型，我将两个divs彼此并排放置，并在左边用50%给出了一个，在右边flex: 1上给出了一个，因此占用了可用空间。

然后我在左侧的jquery-ui resizable上使用了div功能。但是，当我在左侧调整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: ""
    });
})

我正在尝试创建两个div，其中一个是可调整大小的，而另一个则占用了包含两个div的父容器中的剩余可用空间。使用flexbox模型，我同时放置了两个...

Answer 1

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