我刚刚在 Chromium 上看到了
resize:vertical或resize:bothresize:horizontal在或的情况下，我无法将元素的大小调整为小于其初始宽度的宽度resize:both。演示：http: //jsfiddle.net/3rdj4/3
我已经阅读了w3c spec，我想问题是因为这个：
用户代理可以将调整大小范围限制在合适的范围内，例如在元素的原始格式化大小之间，并且大到足以包含所有元素的内容。
有没有办法做到这一点，即使 Chrome 应用了上面的段落？
注意：我使用 Chromium 30.0.1592.0 (216775)
我会说不（没有javascript）。
自定义 CSS 以允许 chrome textarea 调整大小小于初始状态？
您无法在其初始尺寸下调整文本区域大小的事实被报告为错误（https://code.google.com/p/chromium/issues/detail?id=94583）
一个Javascript解决方案：
演示：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;
}
上面的解决方案使用mouseoverandmouseout来触发resizableStartand resizableEnd。问题是如果要调整大小的元素有子元素，当鼠标放在一个子元素上时，该元素会收到一个mouseout事件，然后，它会收到一个mouserover从子元素冒泡的事件。
为了避免这些事件，我使用mouseenter和mouseleave事件实现了另一个解决方案：
演示：http: //jsfiddle.net/nz8ut/3/
这里有一个非常简单的解决方案（可以用纯javascript重写）：
$("element").mousedown(function() {
$("element").css({height:'50px', width: '50px'});
});
当您第一次单击时，元素的原始大小将更改为较小的，但由于您仍然按住按钮 - 它会立即恢复其大小，然后您可以轻松更改您想要的大小。
当然，“50px”或带宽度的高度不是固定的，请根据需要进行调整。
添加最小高度/最大高度怎么样？
这允许将其设置为超出初始值。
#wrapper {
min-height:200px;
max-height: 400px;
resize: vertical;
overflow: auto;
border: 1px solid #000;
}