Example: A absolute bottom left area might want to resize from top edge vertically.

I know this is a bit late, but window is the only part of the DOM that fires the onresize event

I found the webkit restriction on not being able to downsize an element quite frustrating, and found adding :active{ width:0; height: 0; }helps.

Recommended:

• add width, height for a sensible starting size.
• add min-width, min-height for a sensible min size, so you don’t end up with a 0x0 box that is hard to enlarge again.
• add max-width, max-height for a sensible max size, so you don’t end up dragging the corner outside your window.

Notes:

• I’m not quite sure how this makes it work.
• It seems to be a bit of a hack and probably wise not to rely on it on production websites.
• It seems to work on browsers that limit the min size to initial size (WebKit e.g. Chrome).
• It has side effects: if you click the element it can shrink to zero size (temporarily).
• The above is more apparent on mobile devices and browsers that do not support resize,
  and might stay in that state untill clicking or tapping outside the element.
• It is probably wise to use mechanisms to limit it to webkit browsers.

Test here: https://jsfiddle.net/ElMoonLite/771Ln5vu/

Complete example:

.resize {
  resize: both;
  overflow: hidden;
/* optional:
  width:  <some sensible starting size>;
  height: <some sensible starting size>;
  min-width:  <some sensible min size>;
  min-height: <some sensible min size>;
  max-width:  <some sensible max size>;
  max-height: <some sensible max size>;
*/
}
.resize:active {
  width: 0;
  height: 0;
}

You’re always my first resource for everything CSS, cheers for all the help over the years!

Just wanted to expand upon your point about the weirdness across Chrome compared with Firefox. I assumed that you’d be able to assign a min-width, a width and a max-width on the resizable element, with the loaded width being taken by the default width. Then the user should be able to change the width between the min and max widths. This seems to be the case in Firefox but not in Chrome.

Any ideas if this is likely to change to implement the Firefox behaviour in Chrome also?

Thanks,
Josh

Muchas gracias!