Math Functions in Values

Use calc(), min(), max(), and clamp() anywhere a length is expected: width, height, min-width/min-height, max-width/max-height, the positioning properties top/right/bottom/left, margin/padding and their per-side longhands, border-width, border-radius and its per-corner longhands, letter-spacing, line-height, font-size, flex-basis, and gap.

.sidebar {
  width: calc(100% - 48px);
}

calc(100% - 48px) sizes the panel to fill its container minus 48 logical pixels, useful for leaving room for a fixed-width element next to it without hand-computing the remainder.

calc()

calc() accepts +, -, *, and /, with normal operator precedence and nested parentheses:

.tile {
  width: calc((100% - 32px) / 3);
}

+ and - need matching units on both sides, or one side must be a plain number (for a % value that resolves against the containing block). * and / need a plain number on one side: CalmUI does not support multiplying two lengths together.

min() and max()

min() and max() take two or more comma-separated lengths and pick the smallest or largest resolved value:

.card {
  width: min(480px, 90%);
}

This card is 480px wide on a large screen, and shrinks to 90% of its container once 90% of the container is narrower than 480px, a single declaration instead of a media query.

clamp()

clamp(<min>, <preferred>, <max>) keeps a value between a floor and a ceiling:

.panel {
  width: clamp(240px, 60%, 480px);
}

The panel tries to be 60% of its container, but never drops below 240px or grows past 480px.

Mixing units and percentages

A percentage inside calc(), min(), max(), or clamp() resolves against the element's true containing block, the same box a plain width: 50% would resolve against, including when a mix of pixel and percentage terms forces the calculation to be evaluated per layout pass rather than folded to one number up front:

.gutter {
  width: clamp(16px, 4% + 8px, 32px);
}

Nesting and functions can call each other

min(), max(), and clamp() may appear inside calc(), and calc() may appear inside any of the three:

.field {
  width: calc(min(600px, 100%) - 24px);
}

What is outside the profile

Only length-typed properties accept these functions: a color, a font weight, or an animation duration cannot be computed this way. var() inside a math function resolves before the calculation runs, so a custom property whose value is itself a length works normally:

.knob {
  width: calc(var(--knob-size, 24px) * 1.5);
}

See CSS variables for defining --knob-size, and CSS reference for the full list of properties these functions are accepted on.