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

Syntax

/* Used in sizing properties */
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;

Description

This keyword is used with sizing properties such as width, height, block-size, inline-size, min-width, and max-width. When used on these properties, the calculated size refers to the element's content box.

When fit-content is set, the element grows or shrinks to fit its content, but stops expanding after the relevant dimension reaches the size limit of its container.

The fit-content size is calculated using the following formula:

min(max-content, max(min-content, stretch))

where, stretch matches the element's margin box to the width of its containing block. The keyword is essentially equivalent to fit-content(stretch).

You can enable animations to and from fit-content using the interpolate-size property and the calc-size() function.

Examples

Sizing boxes with fit-content

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

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

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

Result

Specifications

Browser compatibility

See also

• Related sizing keywords: min-content, max-content
• CSS box sizing module