Widely availableUseful when content-driven sizing matters and the layout should respect the natural width or shrinkability of what is inside.
Layout Widely available

min-content and max-content

min-content and max-content keywords size boxes according to the intrinsic size of their content. They help layouts respond to actual text and media rather than arbitrary fixed values.

LayoutIntrinsic sizingSizing

Overview

min-content and max-content keywords size boxes according to the intrinsic size of their content. They help layouts respond to actual text and media rather than arbitrary fixed values.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.height.max-content
46
79
66
11
46
11
CSS property
min-content
46
79
66
11
46
11
max-content
46
79
66
11
46
11
min-content
46
79
66
11
46
11
max-content
46
79
66
11
46
11
min-content
46
79
66
11
46
11
max-content
46
79
66
11
46
11
min-content
46
79
66
11
46
11
max-content
46
79
66
11
46
11
min-content
46
79
66
11
46
11
max-content

The max-content sizing keyword represents the maximum intrinsic size of an element. The keyword expands the element to the largest size needed to display its content without any soft wraps. For text content, this keyword does not wrap the content at all, even if it causes overflow.
46
79
66
11
46
11
min-content

The min-content sizing keyword represents the minimum intrinsic size of an element. The keyword shrinks the element to the smallest possible size without causing avoidable overflow of its content. For text content, this keyword causes the content to wrap at every opportunity (such as spaces between words), and the element will be only as wide as the longest…
46
79
66
11
46
11
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (3)
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: -moz- (3)
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- (22)
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 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 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 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: -moz- (3)
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: -moz- (3)
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 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: intrinsic (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: intrinsic (1)
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: min-intrinsic (25)
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 1 item(s)
Implementation note
  • Previously available under a different name: min-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: min-intrinsic (25)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: min-intrinsic (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (22)
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 1 item(s)
Implementation note
  • Previously available under a different name: intrinsic (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (25)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: intrinsic (1)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (48)
Implementation note
  • Previously available under a different name: min-intrinsic (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: min-intrinsic (2)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (48)
Implementation note
  • Previously available under a different name: min-intrinsic (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: min-intrinsic (1)

Syntax

CSS 
.tag {
  width: max-content;
}
.sidebar {
  width: min-content;
}
.grid {
  grid-template-columns: min-content 1fr;
}

Live demo

width: max-content

CSS Width: max-content demo.

PreviewFullscreen

width: min-content

CSS Width: min-content demo.

PreviewFullscreen

grid + min-content

CSS Grid + min-content demo.

PreviewFullscreen

Use cases

  • Content-aware columns

    Allow labels, menus, or side panels to size themselves around their natural content width.

  • Intrinsic layout tuning

    Use intrinsic keywords in Grid and sizing rules for more adaptive layout behavior.

Cautions

  • Intrinsic sizing can produce unexpected overflow if long unbreakable strings appear.
  • These values are powerful but can be harder to reason about than straightforward fixed or percentage sizing.

Accessibility

  • Content-aware sizing can reduce clipping, but long words and zoom still need explicit testing.

Related links

Powered by web-features