Design Atlas
한국어
▦ Layout

Intrinsic sizing

내재적 크기

Three sizing keywords where the content itself — not the container — decides how wide a box should be: min-content, max-content, fit-content().

Also known as: min-contentmax-contentfit-content
···
html
<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>
css
.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}
js
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);

width: 100% or auto are "extrinsic" sizes — the container decides them. min-content, max-content and fit-content() are "intrinsic" sizes instead — only the content decides, so the value itself doesn't change as the container shrinks; if the container ends up narrower than that value, the box simply overflows.

min-content is the narrowest a box can get while still allowing line breaks — practically, "wide enough for the single longest word." max-content is the opposite: the width with no wrapping at all, i.e. the content laid out on one line. fit-content(L) caps that range at L, behaving like clamp(min-content, L, max-content).

Put the same sentence in four boxes with different width rules, and the width: 100% box is the only one that keeps shrinking with its container; the other three insist on their own size and, once the container gets narrower than that, poke past the border (shown here with an orange outline). That's the whole point of intrinsic sizing: it doesn't negotiate with the container.

When to use

width: fit-content suits elements that shouldn't grow wider than their content, like a button. max-content fits text that must never wrap, like a table column header; min-content is handy for measuring the smallest a card is allowed to shrink to.