fit-content() | Frontend Practical Guide

Overview

The fit-content() CSS function, used outside of a grid layout property, clamps a length between min-content and max-content.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.properties.block-size.fit-content_function` Experimental			91
CSS property
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental `fit-content()`			91
`fit-content function` Experimental The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).			91

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

.tag {
  width: fit-content(200px);
  padding: 0.25em 0.5em;
  background: #e5e7eb;
  border-radius: 4px;
}

CSS Fit-content(200px) demo.

CSS Fit-content(120px) demo.

CSS Normal. Fit-content demo.

Component layout
Use fit-content() to create more predictable spacing and placement inside reusable UI patterns.
Responsive structure
Adapt containers and flow rules so layouts stay stable across viewport changes.

Test layout rules with real content, long labels, and small screens before depending on them broadly.
Prefer simpler layout primitives if they already solve the problem clearly.