Wanna let users resize a box by dragging its edge?
Here’s how it works:
🔍 The resize property
By default, elements aren't resizable.
But if you want to make them resizable (like a textarea), you can use:
resize: both;
overflow: scroll;
The second line is crucial. Resize won’t work unless you also set overflow to something scrollable (like auto or scroll).
🧪 The 3 values of resize
resize: both;
➤ You can resize horizontally and vertically.
resize: horizontal;
➤ Only resize left ↔️ right.
resize: vertical;
➤ Only resize up ↕️ down.
Now users can grab the bottom-right corner and drag to resize it.
The only limitation I found is that you can only resize by grabbing the corners, not the sides.
But it could be useful in many cases, where we don't need that functionality.
So, I'll leave that up to you.
