Use CSS Resize to Create Resizable Elements

Jhey Tompkins: [0:00] Here we have a CSS tree and to see the bounds of its container we're going to give it a background-color of hsla(220, 50%, 50%, .5). Now we can see the bounds of our tree.

[0:15] To make that tree element resizable, we can use the resize property with a value of both. Resizable elements only work when the overflow is anything but visible. Let's set overflow to hidden. Now we have a resize handle, and we can drag that around to resize our container.

[0:33] We can also constrain how our resize works. If we only want to resize an element horizontally, we can set resize: horizontal. We can see how the cursor changes to indicate that we have horizontal resizing but not vertical.

[0:46] To resize vertically, we can set resize to vertical, and now our cursor indicates vertical resizing and we can resize vertically but not horizontally. That's it. That's how we create resizable elements with CSS resize.

[0:59] In review, we can use the CSS resize property to resize an element either vertically, horizontally, or in both directions. This will only work if the overflow is anything but visible on our element.