入力内容に応じてテキストエリアの高さを自動調整する方法について、デフォルトでは固定の高さですが、CSS のfield-sizingプロパティを使用することで、コンテンツ量に合わせて動的にサイズを変更できます。
この記事で紹介している方法は、Firefox / Safari のような一部のブラウザでは未対応となっております。ブラウザの互換性につきましてはこちらをご参照ください。
CSS コード
::deep igc-textarea::part(input) {
field-sizing: content; /* 高さを内容量に合わせて自動調整 */
resize: none; /* ユーザーによる手動リサイズを無効化（任意）*/
}
実行結果
上記の CSS を適用すると、テキストの入力に合わせてテキストエリアが拡大します。
