fit-content
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2021.
The fit-content
keyword is equivalent to fit-content(stretch)
. In practice, this means that the box will use the available space, but never more than max-content
.
The fit-content
size is calculated using the following equation, where
is the size of its parent or grid track in grid layout:
min(max-content, max(min-content,
When used as laid out box size for width
, height
, min-width
, min-height
, max-width
and max-height
the maximum and minimum sizes refer to the content size.
The interpolate-size
property and calc-size()
function can be used to enable animations to and from fit-content
.
Note:
The CSS Sizing specification also defines the fit-content()
function. This page details the keyword.
Syntax
width: fit-content;
block-size: fit-content;
Examples
Using fit-content for box sizing
HTML
Item
Item with more text in it.
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
CSS
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Result
Specifications
Specification |
---|
CSS Box Sizing Module Level 4 # valdef-width-fit-content |
Browser compatibility
See also
- Related sizing keywords:
min-content
,max-content
- CSS box sizing module