拡大するtextareaはmax-width / max-heightで制御できる

textarea拡大に潜むレイアウトの危険性

SafariやGoogleChromeでは、textarea要素の右下をドラッグするとボックスが拡大できるようになっています。ユーザーが入力内容に応じてカスタマイズできる、という点ではとても便利な仕様になっています。
しかし、Webデザイナーにとっては意図したレイアウトを壊されてしまう可能性が潜んでいます。縦に伸びるのは特に問題ないのですが、横に際限なく広げられてしまうとカラムをまたいでしまったり、他の要素とfloatで左右に配置している場合は段落ちしてしまったりと、レアケースながらもディレクターやクライアントに指摘されてしまうかもしれません。

対処方法

width / height プロパティで制御できそうなものなのですが、残念ながらこれでは拡大を制御できません。制御するにはmax-width/max-heightを使います。拡大によってレイアウトが崩れてしまう場合は、「ここまでは大きくしてもいい」大きさを指定します。

textarea {
width:300px;
height:100px;
max-width:400px;/*←ここが限界！*/
}

こう考えるとtextareaの場合、width / heightはそれぞれ他の要素におけるmin-width / min-heightのような挙動になるのでしょうか。

なお、拡大させたくない場合はwidth=max-width/height=max-heightで指定すれば期待通りになります。

width:300px;
height:100px;
max-width:300px;
max-height:100px;

でもテキストボックスの右下にある「ドラッグできるデザイン」はそのままなので、「テキストボックスは大きくすることができる」ことを学習したユーザーの期待に反してしまうので、あまりよろしくないですね。。