클램프 레이아웃

<div class="area">
  <div class="viewport" id="viewport">
    <div class="box" id="box"><span id="val">–</span></div>
  </div>
  <div class="code">width: clamp(70px, 55%, 220px)</div>
</div>

.area{width:min(94%,480px);display:flex;flex-direction:column;align-items:center;gap:10px}
.viewport{width:26%;min-width:110px;max-width:92%;border:2px dashed var(--muted);border-radius:10px;padding:12px;
  transition:width 3s cubic-bezier(.4,0,.2,1);display:flex;justify-content:center;box-sizing:border-box}
.viewport.wide{width:92%}
.box{width:clamp(70px,55%,220px);flex-shrink:0;height:44px;border-radius:8px;background:var(--accent);display:grid;place-items:center;
  color:#fff;font:800 clamp(10px,2vmin,13px)/1 ui-monospace,monospace;transition:background .3s}
.box.clamped{background:var(--accent-2)}
.code{font:700 clamp(9px,1.6vmin,11px)/1 ui-monospace,monospace;color:var(--muted)}

const viewport = document.getElementById('viewport');
const box = document.getElementById('box');
const val = document.getElementById('val');
setInterval(() => viewport.classList.toggle('wide'), 3200);
function tick() {
  const w = box.getBoundingClientRect().width;
  val.textContent = Math.round(w) + 'px';
  box.classList.toggle('clamped', w <= 72 || w >= 218);
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);