Back to Snippets

Auto-Growing Textarea with field-sizing CSS

A comment box that starts three lines tall and grows as you type, line by line, until it reaches a ceiling and starts to scroll. There is no script measuring scrollHeight and no hidden mirror element, only one CSS declaration.

field-sizing set to content tells the browser to size the textarea from its value instead of from the rows attribute, which is the thing every auto-grow script tries to fake. The min-height and max-height are written in lh units, so the limits are counted in lines of the current font rather than in pixels that drift when the font size changes. The resize handle is switched off because the box already resizes itself.

field-sizing shipped in Chrome and Edge in 2024 and in Firefox 152 in mid 2026, with Safari still in Technology Preview. In a browser without it the textarea behaves like a normal one at its minimum height, so nothing breaks, it just stops growing.

#css

#html

#textarea

#form

#input

#field-sizing

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: #f1f5f9;
  color: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.composer {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.25);
}

.author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.author div {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.author span:last-child {
  font-size: 0.8125rem;
  color: #64748b;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

textarea {
  field-sizing: content;
  width: 100%;
  min-height: calc(3lh + 27px);
  max-height: calc(10lh + 27px);
  font: inherit;
  line-height: 1.55;
  padding: 12px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  resize: none;
  outline: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

textarea::placeholder {
  color: #94a3b8;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: #64748b;
}

.footer button {
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border: 0;
  border-radius: 9px;
  background: #0f172a;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.footer button:hover {
  background: #1e293b;
}

Auto-Growing Textarea with field-sizing CSS

Share Code Snippet