min-content and max-contentBaseline · Widely available

The min-content and max-content CSS keywords represent the smallest and largest intrinsic sizes of an element.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–45Not supported

46+Supportedsince Oct 13, 2015

Current: 155

Edge

12–18Not supported

79+Supportedsince Jan 15, 2020

Current: 154

Firefox

1–65Not supported

66+Supportedsince Mar 19, 2019

Current: 157

Safari

1–10.1Not supported

11+Supportedsince Sep 19, 2017

Current: 27

MobileChrome Android

18–45Not supported

46+Supportedsince Oct 14, 2015

Current: 155

Firefox Android

4–65Not supported

66+Supportedsince Mar 19, 2019

Current: 157

Safari iOS

1–10.3Not supported

11+Supportedsince Sep 19, 2017

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: max-content.

Feature detection

CSS · check before using

@supports (max-height: min-content) {
  /* styles that rely on max-height: min-content */
}

/* or in JavaScript */
if (CSS.supports("max-height", "min-content")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (12). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
height.max-content	46	79	66	11	46	66	11
height.min-content	46	79	66	11	46	66	11
max-height.max-content	46	79	66	11	46	66	11
max-height.min-content	46	79	66	11	46	66	11
max-width.max-content	46	79	66	11	46	66	11
max-width.min-content	46	79	66	11	46	66	11
min-height.max-content	46	79	66	11	46	66	11
min-height.min-content	46	79	66	11	46	66	11
min-width.max-content	46	79	66	11	46	66	11
min-width.min-content	46	79	66	11	46	66	11
width.max-content	46	79	66	11	46	66	11
width.min-content	46	79	66	11	46	66	11