fitcontent

Fit-content is a CSS intrinsic sizing function and keyword used to size an element to fit its contents, up to a specified maximum. It is part of the CSS Intrinsic Sizing module and is commonly employed in grid and flex layouts, as well as for standard block elements that should expand or shrink to fit their content without growing beyond a limit.

Syntax and forms can be expressed in two basic ways. You can use fit-content as a standalone value, such as width: fit-content or height: fit-content, which sizes the element to its intrinsic content width or height. You can also specify a maximum with fit-content(max), for example width: fit-content(200px). In track sizing terms, fit-content(max) behaves like a clamp: the resulting size is the content’s minimum size up to a maximum constraint, effectively equivalent to min-content capped at the given maximum. If the content is smaller, the element remains small; if the content would exceed the maximum, the size stops at that maximum.

In grid layouts, fit-content is often used to define track sizes, such as grid-template-columns: fit-content(250px) 1fr. This makes the first column size itself to its content but never exceed 250px, while the second column absorbs remaining space. Without a maximum, fit-content sizes to the content’s intrinsic width.

Examples illustrate common usage: div { width: fit-content; } sizes to the element’s intrinsic width, while div { width: fit-content(300px); } caps the width at 300px. See also intrinsic sizing concepts like min-content, max-content, and minmax for related sizing strategies.

Browser support is broad in modern engines, with fit-content implemented in major browsers. Some older or niche environments may lack full support, so compatibility checking is recommended for critical projects.