About this snippet

A comment box that starts three lines tall and grows as you type, line by line, until it reaches ten lines 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, a job that auto-grow scripts otherwise do with JavaScript. The min-height and max-height are written in lh units, with 27px added for the padding and border, 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 arrived in Chrome and Edge 123 in March 2024, Safari 26.2 in December 2025 and Firefox 152 in June 2026, so every current major browser supports it. In an older browser the textarea acts 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
41

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