fit-content

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2021.

The fit-content sizing keyword represents an element size that adapts to its content while staying within the limits of its container. The keyword ensures that the element is never smaller than its minimum intrinsic size (min-content) or larger than its maximum intrinsic size (max-content).

The interpolate-size property and calc-size() function can be used to enable animations to and from fit-content.

Note: In addition to the fit-content keyword, the CSS Box Sizing specification also defines the fit-content() function, which takes a length or percentage as an argument and behaves slightly differently.

Syntax

css
/* Used as a length value */
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;

/* Used in grid tracks */
grid-template-columns: 200px 1fr fit-content;

Description

An element with fit-content grows or shrinks to fit its content, but stops expanding after it reaches the size limit of its container.

The fit-content size is calculated using the following formula, where <available-space> is either the size of the element's parent container or the size of the grid track in grid layout:

min(max-content, max(min-content, <available-space>))

When applied to sizing properties such as width, height, min-width, min-height, max-width, and max-height, the calculated size refers to the content box of the element.

Examples

Sizing boxes with fit-content

HTML

html
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>

CSS

css
.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

Result

Specifications

Specification
CSS Box Sizing Module Level 4
# valdef-width-fit-content

See also