Widely available Supported across all major browsers. Safe to use in production.

fit-content

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

Note: This keyword is different from the fit-content() function. The function is used for grid track sizing (for example in grid-template-columns and grid-auto-rows) and for laid-out box sizing for properties such as width, height, min-width, and max-height.

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.width.fit-content
46
79
94
11
46
11
CSS property
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (22)
Removed
  • This feature was removed in a later browser version (48)
Implementation note
  • Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (3)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Implementation note
  • Previously available under a different name: intrinsic (2)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Removed
  • This feature was removed in a later browser version (48)
Implementation note
  • Previously available under a different name: intrinsic (18)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Implementation note
  • Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (9)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (9)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Compatibility
  • Available with a vendor prefix: -moz- (3)
Implementation note
  • Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Implementation note
  • Previously available under a different name: intrinsic (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Implementation note
  • Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Compatibility
  • Available with a vendor prefix: -moz- (3)
Implementation note
  • Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Implementation note
  • Previously available under a different name: intrinsic (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Implementation note
  • Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (3)
Implementation note
  • Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Implementation note
  • Previously available under a different name: intrinsic (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Implementation note
  • Previously available under a different name: intrinsic (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 2 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (3)
Implementation note
  • Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (7)

Syntax

CSS 
.tag {
  width: fit-content;
  padding: 0.25rem 0.75rem;
  background: #e2e8f0;
  border-radius: 9999px;
}

/* The fit-content() function in Grid */
.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

Live demo

tag(fit-content)

fit-content sizing tag(fit-content) demo.

PreviewFullscreen

headingbottomline

fit-content sizing headingbottomline demo.

PreviewFullscreen

Grid fit-content()

fit-content sizing Grid fit-content() demo.

PreviewFullscreen

Use cases

  • Using fit-content

    The fit-content sizing keyword represents an element size that adapts to its content while staying within the limits of its container.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links