DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Making divs user resizable with CSS
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Making divs user resizable with CSS

This article has nothing to do with browser widths and viewport media queries.

In this article, we will be talking about the resize css property.

This is one property I only came across recently, because when do you actually need the user to resize something other than a textarea box.

In my article demonstrating how the HTML <wbr> tag works, I used the resize property to showcase when the words would break.

You might find yourself in need of this one-day, so here we go, an example of how the CSS resize property works and what options it has.

The end result will look like the following GIF.

CSS Resize property

CSS resize property

To add the option we can use the following syntax:

div {
    resize: {value}
}
Enter fullscreen mode Exit fullscreen mode

Where the value can be one of these:

  • none: Default, user cannot resize the element
  • both: Resize horizontal and vertical
  • horizontal: Only resize horizontally
  • vertical: Only resize vertically
  • initial: Reset back to the initial value
  • inherit: Inherit value from the parent element

To make them effective, let's create some examples:

What's really important to know is that by default, the resize code will not do anything.

This is because the default overflow value is visible, and that will disable the resize.

We can use any of these overflow values: scroll, auto, hidden.

First let's define a basic box to start with:

div {
  width: 100px;
  height: 100px;
  overflow: auto;
}
Enter fullscreen mode Exit fullscreen mode

Now let's make a pink box that can resize both ways:

div.both {
  resize: both;
  background: #ef476f;
}
Enter fullscreen mode Exit fullscreen mode

Perhaps we only want a horizontal resize? Check out the yellow box.

div.horizontal {
  resize: horizontal;
  background: #ffd166;
}
Enter fullscreen mode Exit fullscreen mode

Over even just vertical, check out the green box

div.vertical {
  resize: vertical;
  background: #06d6a0;
}
Enter fullscreen mode Exit fullscreen mode

You can see these boxes in action on the following Codepen.

CSS Removing resize attribute

There is one case where perhaps you want to remove the resize attribute, and this is with textareas.

They come with a default resize property, and we can turn this off by using the following code:

textarea {
  resize: none;
}
Enter fullscreen mode Exit fullscreen mode

You can try this out on the following Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (10)

Collapse
 
alexalannunes profile image
Alex Alan Nunes

it's possible I get resize event?

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Not sure I understand the question correctly?

Collapse
 
leob profile image
leob

Never heard about this before, eye opener! Just like I also never heard about margin collapse until recently. CSS is such a beast, easy to learn, impossible to master.

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

You are very right about that, I still find properties or hacks I've never seen before

Collapse
 
leob profile image
leob

Yes it's incredible, CSS must be the single most complicated and vast topic in all of web dev.

I also believe that more and more can be done using only native browser APIs/capabilities - of course at the moment React is very dominant, but as browser capabilities become ever more powerful and standardized, we may reach a point where a framework (like React or Vue) isn't even needed anymore to build frontends, especially if Web Components become good enough.

Yes we've come a long way since the days of IE8 and "quirks mode" :-)

Collapse
 
rabbitzzc profile image
rabbit

how to action to all div, not just border

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

That won't work with the resize property.
You will need some JavaScript for that

Collapse
 
rabbitzzc profile image
rabbit

sure.

Collapse
 
danieldogeanu profile image
Daniel Dogeanu

I've always set resize: vertical to my textareas to prevent them from breaking the site layout, but I didn't know you could do that on divs.

Collapse
 
dailydevtips1 profile image
Chris Bongers Author

Yeah, same would either turn it off or only vertical.
But can be useful on divs as well.

πŸŒ™ Dark Mode?!

Β 
Turn it on in Settings