Can CSS resize property be used to resize flex column widths?

I want a layout with two columns that fill the page, and allowing one to make one column wider and the other correspondingly narrower. I looked at the question CSS resize property both doesn't work properly with flex, which is why I added the box-sizing: border-box bit.

Here's my code. I see a resize widget in the lower right corner of the left column, and putting the mouse cursor over it changes the cursor, but dragging the widget does not do anything.

* {
    box-sizing: border-box;
}

.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100vh;
    border-style: none;
}

div.divBlock {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    border-style: none;
}

#left {
    flex-basis: 30%;
    resize: horizontal;
    overflow: auto;
    border-right-style: solid;
    border-right-width: 10px;
    flex-grow: 0;
    flex-shrink: 0;
}

#right {
    flex-grow: 1;
    flex-shrink: 1;
}

body {
    margin: 0
}

<div class="flexContainer">

<div id="left" class="divBlock">
</div>

<div id="right" class="divBlock">
</div>

</div>

Solution

Update

I reread the OP and believe that .flexcontainer must stay the same size. If so then apply the following to .left:

padding: 10vw; // Any width you want as a minimum.
overflow: hidden;
resize: horizontal;

Also you might want to add overflow: hidden on <body> or parent element so scrollbars won't popup and get in the way.

* {
  box-sizing: border-box;
}

body {
  overflow: hidden
}

.flexContainer {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  border-style: none;
}

div.divBlock {
  display: inline-block;
  vertical-align: top;
  border-style: none;
}

#left {
  border-right-style: solid;
  border-right-width: 10px;
  overflow: hidden;
  resize: horizontal;
  padding: 10vw
}

#right {
}

body {
  margin: 0
}

<div class="flexContainer">

  <div id="left" class="divBlock">
  </div>

  <div id="right" class="divBlock">
  </div>

</div>