CSS3 resize property allows only increasing DIV size

There is a resize property in CSS3 which can be applied to a div (e.g. http://www.impressivewebs.com/css3-resize/). I am building a rich UI, and found this feature very useful in my case. I try to rely on CSS3 more than JavaScript, so I like this "native" solution.

This problem is - it doesn't allow a user to make the box less than its original size.

It repr开发者_如何学编程oduces in Safari 5.0.5, Chrome 12.0.742.91, while Firefox 4.0.1 resizes a box in both ways.

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

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

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

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

This is set by the browser

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.

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