field-sizingプロパティを使ってみる

field-sizingプロパティを使って、textareaの高さを入力内容に応じて可変にする方法を試してみます。

対応ブラウザ

field-sizingは実験的な機能となっていて、主要ブラウザではchromeとedgeのみサポートされています。

サンプルコード

実際にtextareaに設定して試してみます。

<textarea class="textarea"></textarea>

field-sizingはfixedかcontentの値を設定することができ、fixedが初期値で固定サイズ、contentがコンテンツ内容に合わせてサイズ調整する設定になります。

.textarea {
	width: 400px;
	min-height: 100px;
	max-height: 400px;
	field-sizing: content;
}

min-heightやmax-heightも合わせて設定できるので、最低限の高さや最大の高さを決めておくことも可能です。
field-sizing: conten のデモページ