Функция изменения размера JQuery-UI не работает равномерно с div Flex

Question

Я пытаюсь создать два divs, где один из них имеет изменяемый размер, а другой занимает оставшееся свободное пространство в родительском контейнере, который содержит два divs.

Используя модель flexbox, я поместилоба divs расположены рядом друг с другом и дают одному слева значение 50%, а другому справа flex: 1, поэтому он занимает доступное пространство.

Затем я использовал функцию jquery-ui resizablediv слева. Но когда я изменяю размер 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.

Также не забудьте добавить # перед идентификаторомселектор.