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.
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
<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
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 4The definition of 'fit-content' in that specification. | Editor's Draft | Defines the value as laid out box size for width , height , min-width , min-height , max-width and max-height .
|
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Supported for width (and other sizing properties)
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fit-content
|
Chrome Full support 46 Full support 46 Full support 22 Prefixed' Implemented with the vendor prefix: -webkit- No support 1 — 48 Alternate Name' Uses the non-standard name: |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 3 Full support 3 Prefixed' Implemented with the vendor prefix: -moz- |
IE
No support No |
Opera Full support 33 Full support 33 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- No support 15 — 35 Alternate Name' Uses the non-standard name: |
Safari Full support 11 Full support 11 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- Full support 2 Alternate Name' Uses the non-standard name: |
WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- No support 1 — 48 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 46 Full support 46 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- No support 18 — 48 Alternate Name' Uses the non-standard name: |
Firefox Android Full support 4 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android Full support 33 Full support 33 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- No support 14 — 35 Alternate Name' Uses the non-standard name: |
Safari iOS Full support 11 Full support 11 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- No support 1.0 — 5.0 Alternate Name' Uses the non-standard name: |
Legend
- Full support
- Full support
- No support
- No support
- Uses a non-standard name.'
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- Related sizing keywords:
min-content
,max-content
fit-content by Mozilla Contributors is licensed under CC-BY-SA 2.5.