Last Updated: February 25, 2016
·
5.738K
· simurai

Make HTML elements resizable

If you quickly wanna test out or prototype layouts, you can add a resize property (+ overflow) and then you can drag the bottom-right corner.

div {
    resize: both;
    overflow: auto;
}

You can also limit it to only horizontal or vertical resizing. Here the Docs. It basically adds inline width and/or height styles on that element.

Browser support: Unfortunately it doesn't work in all browsers. Also, Chrome and Firefox have a different implementation of the min/max. So it kinda limits this to be used only during development or testing.

See the demo.

4 Responses
Add your response

That demo is way more fun than it should be...... :(

over 1 year ago ·

how can we use this in the mobile websites??

over 1 year ago ·

@krishyalla I think no mobile browser supports it. I guess you would need to re-create that functionality with JS.

over 1 year ago ·

It's a great tip, but IE doesn't support it .

over 1 year ago ·