CSS-Only Resizable Elements

In Playing With (Fake) Container Queries Chris used the <resize-asaurus> web component to make the elements resizable. Curious to see how that worked I dug into its source.

As I was expecting a truckload of JavaScript to make it work, I was very surprised to see that it basically revolved around using just one single CSS property: resize

The resize CSS property sets whether an element is resizable, and if so, in which directions.

Accepted values for resize are none, horizontal, vertical, and both.

To play nice with CSS Logical Properties the values block and inline will also be supported.

~

# Demo

To get resize working, one must apply it on a block level element + also set overflow to any value but visible. Below is a demo with resize set to both:

See the Pen
Resizable Element (Pure CSS) by Bramus (@bramus)
on CodePen.

Don’t forget to set min-width/min-height/max-width/max-height in case you want to prevent the resizable box from becoming too small/big.

~

# Resizing iframes (and other replaced elements)

A very practical use-case for this is resizable iframe elements: As many embedded CodePen pens are responsive, you want your visitor to be able to resize them.

Could this be a task for CSS resize property you ask? Why yes, but there’s one big problem though: resize and <iframe> don’t play nice together as an <iframe> is a replaced element.

Of course, as with many web things, there’s a little workaround we can use:

1. Wrap the <iframe> in a <div>, and make the <div> resizable.
2. Have <iframe> strech along with the <div>‘s dimensions, using Flexbox.

Like so:

See the Pen
Resizable iframe (Pure CSS) by Bramus (@bramus)
on CodePen.

As images also are replaced elements (see above), you need to apply a similar trick to be able to resize them:

See the Pen
Resizable image (Pure CSS) by Bramus (@bramus)
on CodePen.

~

# Browser Support

Resize is supported in all major browsers, except for MobileSafari (e.g. Safari on iOS). A shame though, as this once again pushes MobileSafari into the “(Mobile)Safari is the new IE6” corner …

.warning {
	display: block;
}

/* Hide warning in case browser supports resize: both; */
@supports (resize: both) {
    .warning {
        display: none;
    }
}

~