Resizer is a javascript library for handling custom resizing of flex box elements.

This allows the user to drag a handle to resize the frame.

Install with NPM

$ npm i resizerjs

Add script to the document

<script src="./node_modules/resizerjs/dist/resizer.min.js"></script>

Add the CSS and customise how you wish.

[data-rz-handle] { flex: 0 0 6px; background-color: rgba(0, 0, 0, 0.5); } [data-rz-handle] div { width: 6px; background-color: rgba(0, 0, 0, 0.5); }

Create an instance of Resizer. Use a CSS selector of the container element as the first argument.

const myResizer = new Resizer('.container');

<div class="container"> <div class="item"></div> <div class="item"></div> </div>