How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

I'm gonna say no(t without javascript).

Custom CSS to allow chrome textarea resize smaller than initial state?

The fact you cannot resize a textarea under its initial dimensions is reported as a bug (https://code.google.com/p/chromium/issues/detail?id=94583)

A Javascript solution:

Demo: http://jsfiddle.net/nz8ut/2/

function resizableStart(e){    this.originalW = this.clientWidth;    this.originalH = this.clientHeight;    this.onmousemove = resizableCheck;    this.onmouseup = this.onmouseout = resizableEnd;}function resizableCheck(e){    if(this.clientWidth !== this.originalW || this.clientHeight !== this.originalH) {        this.originalX = e.clientX;        this.originalY = e.clientY;        this.onmousemove = resizableMove;    }}function resizableMove(e){    var newW = this.originalW + e.clientX - this.originalX,        newH = this.originalH + e.clientY - this.originalY;    if(newW < this.originalW){        this.style.width = newW + 'px';    }    if(newH < this.originalH){        this.style.height = newH + 'px';    }}function resizableEnd(){    this.onmousemove = this.onmouseout = this.onmouseup = null;}var els = document.getElementsByClassName('resizable');for(var i=0, len=els.length; i<len; ++i){    els[i].onmouseover = resizableStart;}

The solution above uses mouseover and mouseout to trigger resizableStart and resizableEnd. The problem is that if the element being resized has childs, when the mouse is placed over a child, the element receives a mouseout event and, just after that, it receives a mouserover event which bubbles from child.

To avoid those events I have implemented another solution with mouseenter and mouseleave events:

Demo: http://jsfiddle.net/nz8ut/3/

A very simply solution here (can be rewritten in pure javascript):

$("element").mousedown(function() {    $("element").css({height:'50px', width: '50px'});});

When you first click, the original size of element will be changed to smaller one, but since you still hold the button - it will restore its size immidiately, and then you can easy change the size however you want.

The '50px', or height with width isn't fixed of course, adjust it after your needs.