fit-content
The fit-content CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.
Overview
The fit-content CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.height.fit-content | 46 | 79 | 94 | 11 | 46 | 11 |
| CSS property | ||||||
fit-content | 46 | 79 | 94 | 11 | 46 | 11 |
fit-content | 46 | 79 | 94 | 11 | 46 | 11 |
fit-content | 46 | 79 | 94 | 11 | 46 | 11 |
fit-content | 46 | 79 | 94 | 11 | 46 | 11 |
| The fit-content sizing keyword represents an element size that adapts to its content while staying within the limits of its container. The keyword ensures that the element is never smaller than its minimum intrinsic size (min-content) or larger than its maximum intrinsic size (max-content). | 46 | 79 | 94 | 11 | 46 | 11 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (9)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (9)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (79)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Compatibility
- Available with a vendor prefix: -moz- (3)
Implementation note
- Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Implementation note
- Previously available under a different name: intrinsic (2)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Implementation note
- Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (79)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Compatibility
- Available with a vendor prefix: -moz- (3)
Implementation note
- Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Implementation note
- Previously available under a different name: intrinsic (2)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Implementation note
- Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (79)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -moz- (3)
Implementation note
- Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Implementation note
- Previously available under a different name: intrinsic (2)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Implementation note
- Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (79)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -moz- (3)
Implementation note
- Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Notes 3 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (22)
Removed
- This feature was removed in a later browser version (48)
Implementation note
- Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -moz- (3)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Implementation note
- Previously available under a different name: intrinsic (2)
Notes 3 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (25)
Removed
- This feature was removed in a later browser version (48)
Implementation note
- Previously available under a different name: intrinsic (18)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (7)
Implementation note
- Previously available under a different name: intrinsic (1)
Syntax
CSS
.tag {
width: fit-content;
padding: 0.25rem 0.75rem;
background: #e2e8f0;
border-radius: 9999px;
}
/* The fit-content() function in Grid */
.grid {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
}Live demo
Use cases
Using fit-content
The fit-content CSS keyword expands a box as needed to fit its contents until the maximum size is reached, preserving the content's preferred aspect ratio.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features