CSS field-sizing — Textareas automatisch skalieren ohne JavaScript

1. Das JavaScript-Problem bei Auto-resize-Textareas

Das automatische Wachsen einer Textarea beim Tippen ist eine der häufigsten UX-Anforderungen in Webformularen — und gleichzeitig eines der langwierigsten Probleme, die bisher kein natives CSS lösen konnte. Der klassische Ansatz: Ein input-Event-Listener liest die Scrollhöhe des Textareas aus (element.scrollHeight), setzt die Höhe auf auto, liest die Scrollhöhe erneut aus und setzt die Höhe dann auf diesen Wert. Dieser Trick funktioniert, hat aber multiple Probleme: Er erfordert JavaScript beim initialen Load, erzeugt einen doppelten Reflow pro Eingabe-Ereignis und kann bei schnellem Tippen zu sichtbarem Flackern führen.

Modernere Ansätze umgehen den doppelten Reflow durch CSS-Tricks: Ein verstecktes Element mit identischen Stilen und demselben Inhalt gibt die korrekte Höhe vor, oder das Textarea wird in einen Grid-Container verpackt, der die Höhe über ein Pseudo-Element steuert. Alle diese Lösungen sind Workarounds für ein Problem, das idealerweise der Browser nativ lösen sollte. Genau das tut CSS field-sizing: Es delegiert die Größenberechnung an den Browser, der direkt auf den internen Layout-Mechanismus zugreifen kann, ohne JavaScript-Roundtrips.

2. Was ist CSS field-sizing?

CSS field-sizing ist eine neue CSS-Eigenschaft, die steuert, wie Formularelemente ihre intrinsische Größe berechnen. Die Eigenschaft hat zwei Werte: fixed (das bisherige Standardverhalten, bei dem width und height-Attribute sowie size-Attribute die Größe bestimmen) und content (das neue Verhalten, bei dem die Größe automatisch an den Inhalt angepasst wird). Mit field-sizing: content verhält sich eine Textarea wie ein Block-Element mit height: auto, dessen Höhe vom enthaltenen Text bestimmt wird.

Die Eigenschaft wurde von Google Chrome implementiert und ist seit Chrome 123 und Edge 123 verfügbar. Firefox hat Unterstützung angekündigt, aber zum Zeitpunkt der Erstellung dieses Artikels noch nicht ausgeliefert. Safari hat ebenfalls keine Unterstützung. Das bedeutet: field-sizing ist eine Progressive-Enhancement-Funktion — Entwickler können sie heute verwenden, müssen aber robuste Fallbacks für Browser ohne Unterstützung implementieren.

/* CSS field-sizing: the simplest auto-growing textarea */
textarea {
  field-sizing: content;
  /* That's it — the textarea now grows with content */
}

/* With sensible constraints */
textarea.comment-field {
  field-sizing: content;
  min-height: 5rem;          /* Minimum height when empty */
  max-height: 20rem;         /* Maximum before scroll kicks in */
  width: 100%;
  resize: none;              /* Hide manual resize handle when auto-sizing */
  overflow-y: auto;          /* Scroll within max-height */
}

/* Auto-sizing text input — grows to fit its content */
input[type="text"].auto-width {
  field-sizing: content;
  min-width: 8rem;
  max-width: 100%;
}

/* Select element — sized to match longest option */
select.auto-size {
  field-sizing: content;
}

3. field-sizing: content im Detail

Mit field-sizing: content entfernt der Browser die feste Größengebung durch HTML-Attribute und CSS-Höhen/-Breiten-Defaults für das jeweilige Formularelement. Stattdessen wird die Größe wie bei regulären Block- oder Inline-Elementen berechnet: Die Höhe einer Textarea ergibt sich aus der Anzahl der Zeilen, die der aktuelle Text einnimmt, multipliziert mit der line-height, plus die Padding-Werte. Wenn der Nutzer tippt und eine neue Zeile beginnt, wächst das Element unmittelbar — ohne JavaScript, ohne Event-Handler, ohne doppelten Reflow.

Dabei respektiert CSS field-sizing: content alle Standard-CSS-Größeneigenschaften. min-height und max-height funktionieren wie erwartet: Das Element wächst nie unter min-height und nie über max-height. Oberhalb von max-height springt der Browser automatisch auf Scroll-Verhalten um, wenn overflow-y: auto gesetzt ist. Das Zusammenspiel dieser drei Eigenschaften gibt Entwicklern vollständige Kontrolle über das Skalierungsverhalten, ohne JavaScript-Code zu schreiben.

4. field-sizing: fixed — das Standardverhalten

Der Wert field-sizing: fixed entspricht dem bisherigen Standardverhalten aller Browser für Formularelemente. Bei fixed wird die Größe durch HTML-Attribute (rows, cols, size), explizite CSS-Werte (width, height) oder Browser-Defaults bestimmt. Das Textarea hat eine feste Höhe, der Nutzer kann durch manuelles Ziehen vergrößern (wenn resize nicht auf none gesetzt ist), aber der Inhalt ändert die Elementgröße nicht automatisch.

Es gibt Situationen, in denen fixed das richtige Verhalten ist — etwa wenn ein Formular ein strukturiertes Layout hat und eine Textarea einen bestimmten Bereich ausfüllen soll, unabhängig vom Inhalt. In solchen Fällen ist es semantisch besser, field-sizing: fixed explizit zu setzen, als auf den Default zu vertrauen — so ist das Verhalten dokumentiert und intentional. Die meisten modernen Chat- und Kommentar-Interfaces profitieren hingegen von field-sizing: content, da sie den Nutzer nicht zwingen, in einem zu kleinen oder zu großen Feld zu tippen.

/* Auto-growing chat input with constraints */
.chat-input-container {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid rgb(226 232 240);
}

.chat-input {
  flex: 1;
  field-sizing: content;
  min-height: 2.5rem;          /* Single line height */
  max-height: 8rem;            /* ~4 lines before scroll */
  padding: 0.5rem 0.75rem;
  border-radius: 1.25rem;
  border: 1px solid rgb(203 213 225);
  resize: none;
  overflow-y: auto;
  line-height: 1.5;
  font-family: inherit;
  font-size: 0.875rem;
}

.chat-input:focus {
  outline: none;
  border-color: rgb(124 58 237);
  box-shadow: 0 0 0 3px rgb(196 181 253 / 0.5);
}

/* Send button aligns to bottom when textarea grows */
.send-button {
  flex-shrink: 0;
  align-self: flex-end;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  background: rgb(124 58 237);
  color: white;
}

5. min-height und max-height kombinieren

Die effektivste Nutzung von CSS field-sizing: content kombiniert die Eigenschaft mit min-height und max-height. Ohne min-height würde eine leere Textarea auf die Höhe einer leeren Zeile schrumpfen — oft nur wenige Pixel hoch, was für Nutzer schwer zu erkennen und zu bedienen ist. Mit min-height: 3rem oder ähnlichen Werten bleibt das Feld immer mindestens so hoch wie eine vernünftige Eingabefläche, auch wenn es leer ist.

max-height verhindert, dass das Feld bei sehr langem Text den gesamten Viewport einnimmt. Kombiniert mit overflow-y: auto scrollt das Feld intern, sobald der Inhalt max-height überschreitet. Das ist das Standardverhalten vieler Chat-Apps und Kommentarfelder: Das Feld wächst bis zu einem Punkt, danach wird der ältere Inhalt durch Scrollen zugänglich. Ohne explizite overflow-Angabe würde der Text über max-height hinaus sichtbar sein, was zu Layout-Überlauf führt.

/* Full-featured auto-growing textarea with @supports */
@supports (field-sizing: content) {
  /* Modern browsers: pure CSS solution */
  .auto-textarea {
    field-sizing: content;
    min-height: 4rem;
    max-height: 16rem;
    overflow-y: auto;
    resize: none;
    /* Smooth height transitions */
    transition: height 0.1s ease;
  }
}

@supports not (field-sizing: content) {
  /* Fallback: JS-driven resize via data attribute */
  .auto-textarea {
    /* Base styles for JS enhancement */
    min-height: 4rem;
    resize: vertical;
    overflow: hidden;
  }
  /* JS adds data-replicated-value and drives height */
}

/* Input that expands with typed content */
.tag-input {
  field-sizing: content;
  min-width: 4ch;              /* Minimum: 4 characters wide */
  max-width: 30ch;
  overflow: hidden;
}

6. Weitere unterstützte Formularelemente

CSS field-sizing funktioniert nicht nur für Textareas — es unterstützt auch andere Formularelemente. Bei <input type="text"> und anderen Text-Inputs bewirkt field-sizing: content, dass die Breite des Felds dem eingetippten Text entspricht, anstatt eine feste Breite zu haben. Das ist nützlich für Tag-Eingabefelder, Inline-Editoren und andere Interfaces, bei denen das Input-Feld nur so breit sein soll wie sein Inhalt.

Bei <select>-Elementen bewirkt field-sizing: content, dass die Breite der längsten verfügbaren Option entspricht statt einer Browser-Default-Breite. Bei Number-Inputs passt sich die Breite der Anzahl der Stellen der eingegebenen Zahl an. Das Verhalten ist konsistent: Das Element zeigt seinen Placeholder oder seinen aktuellen Wert an und nimmt genau so viel Platz ein wie dieser Inhalt benötigt, respektiert aber immer min-width/max-width-Grenzen.

7. Browser-Support und aktuelle Situation

Zum Zeitpunkt dieses Artikels (Mai 2026) unterstützen Chrome ab Version 123 und Edge ab Version 123 CSS field-sizing vollständig. Firefox hat die Eigenschaft auf seiner Roadmap, aber noch nicht ausgeliefert. Safari hat ebenfalls noch keine Unterstützung angekündigt. Das ergibt eine Situation, in der field-sizing in Chromium-Browsern funktioniert, aber für Safari und Firefox-Nutzer ein Fallback benötigt wird.

Die Strategie für Produktionsprojekte ist daher Progressive Enhancement mit @supports: Wenn der Browser field-sizing: content unterstützt, wird die native CSS-Lösung genutzt. Für alle anderen Browser bleibt die bewährte JavaScript-basierte Resize-Logik aktiv. Das ist kein Rückschritt — Nutzer von Chrome und Edge profitieren sofort von der saubereren Lösung, während die Erfahrung für Safari- und Firefox-Nutzer unverändert bleibt.

8. field-sizing vs. JavaScript-Lösungen im Vergleich

Die technischen Unterschiede zwischen CSS field-sizing und JavaScript-basierten Auto-resize-Implementierungen sind erheblich. Die CSS-Lösung läuft direkt im Rendering-Prozess des Browsers, ohne JavaScript-Roundtrip und ohne doppelten Layout-Reflow. JavaScript-Lösungen setzen mindestens einen Reflow pro Tastendruck voraus — oft sogar zwei, wenn die Scroll-Height-Methode verwendet wird.

Der CSS-Grid-Trick verdient eine kurze Erklärung: Das Textarea wird in ein Grid-Element eingebettet, und ein verstecktes div mit demselben Inhalt gibt die korrekte Höhe vor. Dieser Ansatz vermeidet den doppelten Reflow der scrollHeight-Methode, erfordert aber JavaScript für die Inhaltssynchronisation. Für Projekte, die alle Browser unterstützen müssen, bleibt er die bevorzugte Fallback-Methode, bis field-sizing breiteren Support hat.

9. Fallback-Strategien für ältere Browser

Die empfohlene Fallback-Strategie nutzt @supports um native und JS-basierte Implementierung zu trennen. Der Kern des Fallbacks ist der Grid-Container-Trick: Das Textarea und ein verstecktes data-replicated-value-Attribut-gesteuertes Pseudo-Element befinden sich im selben Grid-Container. JavaScript synchronisiert den Textarea-Inhalt mit dem data-replicated-value-Attribut, das CSS nutzt, um die Höhe des Containers zu berechnen. Das Textarea übernimmt die Höhe des Containers automatisch über height: 100%.

Für Hyvä-Projekte mit Alpine.js ist der Fallback besonders elegant implementierbar: Alpine's x-model-Direktive synchronisiert den Textarea-Inhalt mit einer reaktiven Variable, die gleichzeitig das versteckte Element befüllt. Mit @supports (field-sizing: content) wird die Alpine-Logik dann nur geladen, wenn der Browser field-sizing nicht nativ unterstützt — das minimiert unnötigen JavaScript-Code in modernen Browsern.

10. Zusammenfassung

CSS field-sizing: content ist die lang erwartete native Lösung für automatisch wachsende Textareas und Formularfelder. Die Eigenschaft delegiert die Größenberechnung an den Browser-eigenen Layout-Algorithmus, was null JavaScript-Roundtrips und null zusätzliche Reflows bedeutet. In Kombination mit min-height, max-height und overflow-y: auto entsteht ein vollständiges, flexibles Auto-Resize-System rein in CSS.

Die aktuelle Einschränkung ist der Browser-Support: Chrome und Edge unterstützen field-sizing seit Version 123, Firefox und Safari noch nicht. Die empfohlene Implementierungsstrategie ist Progressive Enhancement mit @supports (field-sizing: content): Moderne Browser nutzen die CSS-Lösung, ältere Browser erhalten den bewährten JavaScript-basierten Fallback. Mit dieser Strategie kann field-sizing heute in Produktionsprojekten eingesetzt werden.

11. FAQ: CSS field-sizing und Auto-resize-Textareas