YABI LABS / CSS EXPERIMENT

入力欄、文章に合わせて
育つようにしてみた。

同じ文章で比較。右の自動伸縮はCSSだけ。

文章を入力して比べられます

BEFORE

標準の入力欄

field-sizing: fixedメモ（標準）

rows="2"。内容が増えると内部スクロール。

AFTER

field-sizing: contentメモ（自動伸縮）

最小92px、最大220px。上限でスクロール。

高さを書き換えるJSはなし。幅は100%で、高さだけ内容に合わせます。

伸びない条件・初期サイズを試す

右に height: 120px を追加両方を rows="6" にする両方のplaceholderを長文にする（空欄で確認）右を field-sizing: fixed に戻す

非対応ブラウザの再現ではなく、最後の項目はこの環境で既定値に戻す比較です。右下を手動でリサイズすると高さが固定される場合があります。「リセット」で元に戻せます。

textarea.auto {
  box-sizing: border-box;
  width: 100%;
  field-sizing: content;
  min-height: 92px;
  max-height: 220px;
  overflow-y: auto;
}

再生中の文字入力は自動操作です。高さはブラウザが計算します。入力内容は保存・送信しません。