Css resize min-width

Question

I want to make a div resizable with resize css property:

#foo{
  overflow: hidden;
  resize: both;
}

I can freely resize it with firefox.

with chrome/safari I can't resize it smaller than initial size.

their is a way to allow resize smaller with webkit? (min-width / min-height don't works)

see the live exemple from MDN (with 2 nested divs) https://developer.mozilla.org/samples/cssref/resize.html

Answer 1

Better solution is to use :active pseudo class e.g:

div:active {
  height: 0;
  width: 0;
}

Example: http://jsfiddle.net/kronenbear/v4Lq5o09/1/

Answer 2

There is a small workaround that I found here, but it does work.

On hover, change the height and width to 1px

#foo:hover{
    width: 1px;
    height: 1px;
}

It sounds like this will cause a slight "flash" as the width and height are dramatically changing, but ... it is a hack.