Resize a div to smaller than its declared size?

Question

Is there a way to resize a div to smaller than the declared height and width?

I'm making an application where the user can resize a div and save it. However, when I load it later and set it to the size the user set to last time, they can make the div bigger, but not smaller.

This is a sample div:

.cls {
  border: solid 1px;
  width: 100px;
  height: 100px;
  resize: both;
  overflow: auto;   
}​

http://jsfiddle.net/FNXnD/

This question has the same issue but uses GWT and doesn't seem to have a good solution.

Answer 1

If you want to use the CSS3 UI resize feature, then your browser decides whether you can make it smaller or bigger than declared width or height. http://www.w3.org/TR/css3-ui/#resize

The user agent may restrict the resizing range to something suitable, such as between the original formatted size of the element, and large enough to encompass all the element's contents.

In Firefox for example, you can resize it smaller than your declared width or height. Whilst in chrome you cannot.

Answer 2

Just want to make a slight modification to what Pfft said in the accepted answer.

If you use the :active pseudo-class instead of :hover it doesn't have the flicker when you hover over the element. That flicker is really annoying.

div:active {
  width: 0;
  height: 0;
}

By using :active what happens is when clicking on the element it will be resized to the height: 0, width: 0 so a little dot where the 1px border is will be shown but as soon as the user starts resizing you get exactly what you would want in resizing. And on every subsequent resize there is no glitch and it just works perfectly.

I find this to be much less annoying than using hover. Thanks to Pfft for the above response, it was exactly what I was looking for and led me to my own slightly altered solution!

Here's a jsfiddle of it: http://jsfiddle.net/kronenbear/v4Lq5o09/1/