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>