v150 · CSS · Width & Height Demo

Width & Height Demo

Drag the slider to change content length. The fit-content(280px) box (highlighted) shrinks to hug short text and stops at 280 px for long text. Compare against max-content (no cap) and a fixed-width box.

Chrome 150 required for fit-content() on width. In older browsers this falls back to the initial value — the box expands to full container width. The behaviour you see below correctly represents the intended layout in Chrome 150+.

live demo

Content words: 5 words

width: fit-content(280px) Loading …

width: max-content Loading …

width: 280px (fixed) Loading …

what to observe

Short text: fit-content shrinks to hug the text. max-content also shrinks. Fixed-width stays at 280 px.
Long text: fit-content stops at 280 px and wraps. max-content keeps growing. Fixed-width stays at 280 px but clips/wraps.
fit-content(280px) = the ideal "shrink-wrap with a cap" — it combines the best of both.

code

.tooltip, .badge, .caption {
  /* Shrinks to hug content, caps at 280px — Chrome 150+ */
  width: fit-content(280px);

  /* Equivalent meaning:
     width = min(max-content, max(min-content, 280px))
     = "be as narrow as content, never exceed 280px" */
}

/* Percentage cap — adapts to container */
.responsive-label {
  width: fit-content(50%);
}

live demo

what to observe

code

see also