field-sizing: content

Baseline 2026 (Chrome 123, Safari 26.2, Firefox 152 im Juni 2026).

Chrome 123Edge 123Safari 26.2Firefox 152

Lässt Inputs, Textareas und Selects sich nach ihrem Inhalt bemessen, sodass eine Textarea beim Tippen wächst und ein Input so breit ist wie sein Wert. Killt das Auto-Grow-Textarea-JS-Snippet.

Notes

CSS

.fx-031 {
  font-family: system-ui;
  display: grid;
  gap: 4px;
  max-width: 400px
}
.fx-031 textarea {
  field-sizing: content;
  min-height: 2lh;
  max-height: 12lh;
  padding: 8px;
  border: 1px solid #bbb;
  border-radius: 8px;
  resize: none
}
.fx-031 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<label class="fx-031">Notes <textarea rows="2" placeholder="Type to grow"></textarea></label>

Fallback: Browser ohne Unterstützung behalten die feste `rows`-Höhe mit Scrollbalken.

Quelle: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/152 and https://webkit.org/blog/17640/webkit-features-for-safari-26-2/

Prompt

Nutze für automatisch wachsende Textareas und Inputs `field-sizing: content` mit `min-height`/`max-height` in `lh`-Einheiten als Grenzen; ergänze keine Input-Listener, die `style.height` setzen. Behalte `rows`/`size` als Fallback-Größe.