CSS3 Resize in Webkit/Safari


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?

Problem courtesy of: arbales


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>


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

   /* Styling */
   background: red;
   position: absolute; /* per the question */
   top: 50px;
   left: 50px;
   width: 300px
Solution courtesy of: Doug Neiner


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.