CSS contain — draw the boundary

<div class="pg">
    <h1 class="pg-title">🎮 CSS <code>contain</code>: draw the boundary</h1>
    <p class="pg-sub">
      Toggle <code>contain</code> on a noisy widget and watch which boxes the layout model
      has to recheck — then see the one real gotcha that collapses an element to nothing.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The boundary</div>
      <div class="btn-row">
        <button class="btn primary" id="update">Update the widget</button>
        <button class="btn ghost" id="resetRow">Reset</button>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="containToggle" />
          <span class="switch"></span>
          <span><code>contain: layout paint</code> on the widget</span>
        </label>
      </div>

<div class="row-stage" id="rowStage">
        <div class="box" id="widget">
          Widget
          <span class="big" id="counter">0</span>
          unread
          <div class="box-tag" id="tagWidget">checked</div>
        </div>
        <div class="box sibling">Sidebar card<div class="box-tag" id="tagS1">checked</div></div>
        <div class="box sibling">Sidebar card<div class="box-tag" id="tagS2">checked</div></div>
        <div class="box sibling">Footer<div class="box-tag" id="tagS3">checked</div></div>
      </div>

<div class="status" id="rowStatus" style="margin-top:12px">
        <span class="dot info" id="rowDot"></span>
        <span id="rowStatusText">Click "Update the widget" to see what has to be rechecked.</span>
      </div>
      <p class="hint">
        This half is a <strong>model of the guarantee</strong> <code>contain</code> makes —
        not a captured performance trace. Without it, the browser can't rule out the widget's
        change reaching its neighbors, so they stay "in scope" (amber). With it, the browser
        has a promise that nothing escapes the dashed box, so the others are skipped (green).
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The gotcha — this part is real CSS, live in your browser</div>
      <div class="seg" id="sizeModeSeg" role="tablist">
        <button class="btn sm" data-mode="none" aria-pressed="true">No <code>contain</code></button>
        <button class="btn sm" data-mode="strict-nosize"><code>strict</code>, no height set</button>
        <button class="btn sm" data-mode="strict-size"><code>strict</code>, height set</button>
      </div>
      <div class="collapse-stage">
        <div class="collapse-box" id="collapseBox" data-mode="none">
          <p>This box has real text inside it, and (in this mode) no fixed height — its
          height normally comes from measuring that content.</p>
        </div>
      </div>
      <div class="status" id="collapseStatus" style="margin-top:12px">
        <span class="dot info" id="collapseDot"></span>
        <span id="collapseStatusText">Pick a mode above.</span>
      </div>
      <p class="hint" id="collapseHint">
        <code>size</code> containment computes the box's size as if it had no content, on
        purpose — so the browser never waits on the subtree to know how much space to
        reserve. Without an explicit height to fall back on, "as if it had no content" means
        the box collapses toward nothing, and paint containment clips the overflow instead
        of letting it show.
      </p>
    </div>
  </div>

preview

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