W3cubDocs

/CSS

fit-content

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.

Syntax

A function accepting a <length> or a <percentage> as an argument.

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

#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

<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 compatibilityUpdate compatibility data on GitHub

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