field-sizing: content — auto-grow textarea playground

<div class="pg">
    <h1 class="pg-title">🎮 field-sizing: content vs. the scrollHeight hack</h1>
    <p class="pg-sub">
      Two textareas, same input. The left one grows via a JavaScript listener reading
      <code>scrollHeight</code> on every keystroke. The right one grows because of one
      CSS line: <code>field-sizing: content</code>. Type in either, watch both.
    </p>

<div class="banner show info" id="supportBanner" style="margin-bottom:14px">
      Checking your browser's <code>field-sizing</code> support…
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <button class="btn sm" data-preset="short">Insert a short reply</button>
        <button class="btn sm" data-preset="long">Paste a long comment</button>
        <button class="btn ghost sm" id="reset">Reset both</button>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="capToggle" checked />
          <span class="switch"></span>
          <span>cap the CSS box with <code>max-height</code></span>
        </label>
      </div>
      <p class="hint">
        Uncheck the cap and paste the long comment again — that's the gotcha the post
        warns about: no <code>max-height</code>, no ceiling.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — type or paste in either box</div>
      <div class="compare">
        <div>
          <div class="box-label"><span class="old-way">❌ JS hack — scrollHeight on every keystroke</span><span class="h" id="jsHeight">54px</span></div>
          <textarea id="jsArea" rows="2" placeholder="Type here…"></textarea>
        </div>
        <div>
          <div class="box-label"><span class="new-way">✅ CSS — field-sizing: content</span><span class="h" id="cssHeight">—</span></div>
          <textarea id="cssArea" rows="2" placeholder="Type here…"></textarea>
        </div>
      </div>

<div class="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready — try a preset above.</span>
      </div>
      <p class="hint">
        <strong id="reflowCount">0</strong> layout reads so far on the JS side
        (one forced <code>scrollHeight</code> read per keystroke). The CSS box never
        runs a line of JavaScript to resize itself — that counter only exists on the left.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.