Web/CSS/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 3The 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 LayoutThe 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)

No compatibility data found. Please contribute data for "css.properties.width.fit-content-function" (depth: 1) to the MDN compatibility data repository.

Supported in grid layout

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`fit-content()`	Chrome Full support 29	Edge Full support 16	Firefox Full support 51	IE No support No	Opera Full support 44	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 51	Opera Android Full support 43	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0

Legend

Full support: Full support
No support: No support