Widely availableSupported across all major browsers. Safe to use in production.
Syntax and cascade Widely available

min(), max(), and clamp()

The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range.

Syntax and cascade

Overview

The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
clamp
79
79
75
13.1
79
13.4
Other
css.types.max

The max() CSS function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a <length>, <frequency>, angle, <time>, <percentage>, <number>, or <integer> is allowed.
79
79
75
11.1
79
11.3
css.types.min

The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, angle, <time>, <percentage>, <number>, or <integer> is allowed.
79
79
75
11.1
79
11.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.container {
  /* Limit maximum width to 1200px */
  width: min(100% - 2rem, 1200px);
}

.heading {
  /* Fluid font size (range of 24px to 48px) */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.card {
  /* Ensure a minimum width of 300px */
  width: max(300px, 30vw);
}

Live demo

maxwidthlimit with min()

maxwidthlimit demo. with min(), max(), clamp() min()

PreviewFullscreen

Clamp() font

min(), max(), clamp() Clamp() font demo.

PreviewFullscreen

min with max

min demo. with min, max, clamp max

PreviewFullscreen

Use cases

  • Using min(), max(), and clamp()

    The min() and max() CSS functions return the minimum or maximum of the arguments, while clamp() clamps a value to a given range.

Cautions

  • May not be supported in older browsers.

Accessibility

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

Related links

Powered by web-features