fit-content
The fit-content
behaves as fit-content(stretch)
. In practice this means that the box will use the available space, but never more than max-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.
Note: The CSS Sizing specification also defines the fit-content()
function. This page details the keyword.
Syntax
css
width: fit-content;
block-size: fit-content;
Examples
Using fit-content for box sizing
HTML
html
<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">
Item with more text in it, hopefully we have added enough text so the text
will start to wrap.
</div>
</div>
CSS
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
BCD tables only load in the browser
See also
- Related sizing keywords:
min-content
,max-content