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 reproduces 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>

回答1:

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

来源：https://stackoverflow.com/questions/6313358/css3-resize-property-allows-only-increasing-div-size