CSS3 Resize in Webkit/Safari

Question

I'm attempting to use CSS3's resize to make an absolutely positioned div resizable in Safari and Firefox Beta. No matter what I do I can't seem to make it work – are there situations that resize cannot be used?

Answer 1

In order for it to work in Safari, it seems to need overflow:auto applied to the div.

Additionally, the display height and width of the div will act as min-height and min-width.

This only worked for me in Safari, not in Firefox 3.5.

<div id="box"> Nice box </div>

CSS:

#box {
   /* important */
   resize: both;
   overflow: auto;

   /* Styling */
   background: red;
   position: absolute; /* per the question */
   top: 50px;
   left: 50px;
   width: 300px
}