# field-sizing: content

Status: Baseline 2026 (Chrome 123, Safari 26.2, Firefox 152 im Juni 2026).  
Quelle: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/152 and https://webkit.org/blog/17640/webkit-features-for-safari-26-2/  
Seite: https://designforai.dev/de/css/field-sizing

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.

## HTML

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

## CSS

```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; }
```

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

## 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.