This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The fit-content()
CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument))
.
/* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%)
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.
A function accepting a <length>
or a <percentage>
as an argument.
<length>
<percentage>
fit-content( [ <length> | <percentage> ] )
#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; }
<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>
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 29 | 16 | 51 | No | 44 | 10.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 57 | 57 | 16 | 51 | 44 | 10.3 | 7.0 |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content