About this snippet

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.

Size
2.3 KB
Uses
HTML, CSS
Loads
Nothing external
Views
38

Collections

Related snippets

<div class="composer">
  <div class="author">
    <span class="avatar">MR</span>
    <div>
      <strong>Maya Rowe</strong>
      <span>Replying to the thread</span>
    </div>
  </div>
  <label class="sr-only" for="comment">Your reply</label>
  <textarea id="comment" placeholder="Write a reply. The box grows as you type."></textarea>
  <div class="footer">
    <span>Markdown is supported</span>
    <button type="button">Post reply</button>
  </div>
</div>
*, *::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;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save