This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).
The function can be used as a track size in CSS Grid properties, where the maximum size is defined by max-content and the minimum size by auto, which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.
It can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum size refers to the maximum content size and the minimum size to the minimum content size.
Syntax
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%)
Values
- <length>
- An absolute length.
- <percentage>
- A percentage relative to the available space in the given axis.
- In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.
Formal syntax
fit-content( [ <length> | <percentage> ] )
Example
CSS content
#container {
display: grid;
grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
HTML content
<div id="container">
<div>Item as wide as the content.</div>
<div>
Item with more text in it. Because the contents of it are
wider than the maximum width, it is clamped at 300 pixels.
</div>
<div>Flexible item</div>
</div>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'fit-content()' in that specification. |
Working Draft | Defines the function as laid out box size for width, height, min-width, min-height, max-width and max-height. |
| CSS Grid Layout The definition of 'fit-content()' in that specification. |
Candidate Recommendation | Defines the function when used as a track size. |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Supported as laid out box size | No support | ? | No support[2] | No support | No support | ? |
| Supported as track size | 57.0[1] | No support | 52.0 (52.0)[3] | No support | No support[4] | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Supported as laid out box size | No support | No support[2] | ? | ? | ? |
| Supported as track size | ? | 52.0 (52.0)[3] | No support | No support | No support |
[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0. Since Chrome 57.0 available by default.
[2] This function is not implemented yet for the width and height related properties. See bug 1312588.
[3] Implemented behind the preference layout.css.grid.enabled since Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) it is enabled by default.
[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.