テキストエリアや入力欄のサイズを入力内容に合わせて自動で伸縮させるプロパティです。field-sizing: contentを指定するだけで、これまでJavaScriptで実装していたtextareaの自動リサイズが不要になります。
field-sizing: fixed | contenttextarea {
field-sizing: content;
min-height: 3lh;
max-height: 12lh;
}内容に応じて伸びるテキストエリア（最小3行・最大12行に制限）
input {
field-sizing: content;
min-width: 8em;
}入力した文字数に合わせて幅が伸びるインプット
min-height / max-height（行数ベースならlh単位が便利）と組み合わせて伸縮範囲を制御するのが定番です。select要素にも適用でき、選択中の項目に合わせた幅になります。
field-sizing: contentを指定すると、rows属性やwidthによる固定サイズ指定は無視されます。無制限に伸びると困る場合はmax-heightの併用を忘れずに。
AIはtextareaの自動リサイズにscrollHeightを使ったJavaScript実装やライブラリを提案しがちですが、field-sizing: contentならCSS1行です。2026年6月にBaseline入りしたばかりの新しい機能のため、ほとんどのAIの学習データに存在しません。「そんなプロパティはない」とAIが否定してきたら、このページを見せてください。
このJavaScriptによるtextarea自動リサイズを、field-sizing: contentとmin/max-heightのCSSだけの実装に置き換えて
チャット入力欄を、1行から始まって内容に応じて最大8行まで伸びるようにfield-sizingで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。
2026年6月にBaseline到達したばかりの新機能