CSS3 resize property allows to increase div size

Question

CSS3 has a resize property that can be applied to div(e.g. http://www.impressivewebs.com/css3-resize/ ). I am creating a rich interface and found this feature very useful in my case. I try to rely on CSS3 more than on JavaScript, so I like this “native” solution.

This problem - this does not allow the user to make the box smaller than its original size.

It plays in Safari 5.0.5, Chrome 12.0.742.91, and Firefox 4.0.1 resizes the window in both directions.

Question : is there any workaround for the desired behavior? I still want to stick with the resize property.

Example : http://jsfiddle.net/wsCQm/

.resizable {
     height: 100px;
     width: 100px;    
     overflow: scroll;
     resize: both;   
}

<div class="resizable"> 
    Some stuff
</div>

Answer 1

This is set by the browser.

A user agent may limit the size range to something appropriate, for example, between the original formatted element size and large enough to cover the entire contents of the element.

http://www.w3.org/TR/css3-ui/#resize