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

Question

I am trying to create two divs where one of which is resizable and the other takes the remaining available space in the parent container which holds the two divs.

Using flexbox model, i placed both divs beside each other and gave the one on the left a with of 50% and the one on the right flex: 1 so it takes the available space.

I then used jquery-ui resizable function on the div by the left. But when i resize the div by the left, it only decreases on mouse drag and does not increase, neither does the div to the right decrease..

I am trying to archive something like that of codepen, with multiple resizable divs layed out vertically or horizontally

Here is my code

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;
      }
    });
})

Check out this CodePen

I added a function to lock the resizable along Y axis.

Also, remember to add # before id selector.