내재적 크기

<div class="board" id="board">
  <div class="track"><div class="box w1">Bright orange kangaroo</div><span class="tag">width: 100%</span></div>
  <div class="track"><div class="box w2">Bright orange kangaroo</div><span class="tag">width: min-content</span></div>
  <div class="track"><div class="box w3">Bright orange kangaroo</div><span class="tag">width: max-content</span></div>
  <div class="track"><div class="box w4">Bright orange kangaroo</div><span class="tag">width: fit-content(120px)</span></div>
</div>

.board{width:min(92%,420px);display:flex;flex-direction:column;gap:14px}
.track{position:relative;border:2px dashed var(--muted);border-radius:8px;padding:8px 6px 6px;overflow:visible;
  width:62%;transition:width 2.8s cubic-bezier(.4,0,.2,1)}
.board.narrow .track{width:26%}
.box{background:var(--accent);color:#fff;border-radius:6px;padding:6px 8px;font-size:clamp(9px,1.8vmin,11px);
  font-weight:700;line-height:1.3;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.w1{width:100%}
.w2{width:min-content}
.w3{width:max-content;background:var(--accent-3)}
.w4{width:fit-content(120px);background:var(--accent-3)}
.tag{position:absolute;left:6px;top:-9px;font:700 8px/1 ui-monospace,monospace;background:var(--bg);
  padding:0 4px;color:var(--accent-2)}
.track.spill .box{outline:2px solid var(--accent-2);outline-offset:1px}

const board = document.getElementById('board');
const tracks = board.querySelectorAll('.track');
setInterval(() => board.classList.toggle('narrow'), 2800);
function check() {
  tracks.forEach((t) => {
    const box = t.querySelector('.box');
    const over = box.scrollWidth > t.clientWidth - 12;
    t.classList.toggle('spill', over);
  });
  requestAnimationFrame(check);
}
requestAnimationFrame(check);