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

You requested a workaround for your problem, or was wondering how-to at least. I made you a simple workaround that might require a little work; note it is a workaround, and might therefore contain glitches.

.cls {
    width: 100px;
    height: 100px;
    resize: both;
    overflow: auto;
    border: 1px dotted #000;
}

.cls:hover {
    width: 1px;
    height: 1px;
}

​
Updated fiddle: http://jsfiddle.net/FNXnD/1/

• Note Chrome, and Safari might change the CSS3 resize feature in future versions.