fit-content()

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.

The function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size.

Syntax

The fit-content() function accepts a <length> or a <percentage> as an argument.

/* <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.

Examples

Sizing grid columns with fit-content

HTML

<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>

CSS

#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;
}

Result

Specifications

Specification Status Comment
CSS Box 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

Supported for width (and other sizing properties)

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fit-contentChrome Full support 46
Full support 46
Full support 22
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 1 — 48
Alternate Name
Alternate Name Uses the non-standard name: intrinsic
Edge Full support 79
Full support 79
Full support 79
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 33
Full support 33
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 15 — 35
Alternate Name
Alternate Name Uses the non-standard name: intrinsic
Safari Full support 11
Full support 11
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 2
Alternate Name
Alternate Name Uses the non-standard name: intrinsic
WebView Android Full support 46
Full support 46
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 1 — 48
Alternate Name
Alternate Name Uses the non-standard name: intrinsic
Chrome Android Full support 46
Full support 46
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 18 — 48
Alternate Name
Alternate Name Uses the non-standard name: intrinsic
Firefox Android Full support 4
Prefixed
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 33
Full support 33
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 14 — 35
Alternate Name
Alternate Name Uses the non-standard name: intrinsic
Safari iOS Full support 11
Full support 11
Full support 7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: intrinsic
Samsung Internet Android Full support 5.0
Full support 5.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 1.0 — 5.0
Alternate Name
Alternate Name Uses the non-standard name: intrinsic

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.

Supported in grid layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fit-content()Chrome Full support 29Edge Full support 16Firefox Full support 51IE No support NoOpera Full support 44Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 51Opera Android Full support 43Safari iOS Full support 10.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support

See also