Codectionary / Developer documentation / CSS

calc(), min(), max(), clamp()

These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.

Syntax

calc(expression)
clamp(min, preferred, max)

Examples

calc() for Mixed-Unit Math

Combining different units in a single calculation.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-calculation{display:flex;border:1px solid #94a3b8}.preview-calculation aside{width:250px;flex:none;background:#fef3c7;color:#422006}.sidebar-offset{background:#dcfce7;color:#14532d}

.sidebar-offset {
  width: calc(100% - 250px); /* fills remaining space next to a fixed 250px sidebar */
}

.centered-minus-gap {
  margin-top: calc(2rem + 10px);
}
  1. The preview contains the layout or text targeted by the expression.
  2. calc combines a percentage container width with a fixed sidebar width.
  3. Resize the available width and compare computed dimensions rather than expecting a static image.
HTML used by this example
<div class="preview-calculation"><aside>250px sidebar</aside><main class="sidebar-offset">The remaining width</main></div><p class="centered-minus-gap">A calculated top margin.</p>

clamp() for Fluid Typography

The most common modern pattern - text that scales with the viewport but stays within safe bounds.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-calculation{display:flex;border:1px solid #94a3b8}.preview-calculation aside{width:250px;flex:none;background:#fef3c7;color:#422006}.sidebar-offset{background:#dcfce7;color:#14532d}

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
  /* never smaller than 1.75rem, never larger than 3.5rem,
     scales fluidly with viewport width in between */
}
  1. The preview contains the layout or text targeted by the expression.
  2. clamp chooses the preferred fluid size but limits it to the minimum and maximum.
  3. Resize the available width and compare computed dimensions rather than expecting a static image.
HTML used by this example
<h1>A heading that grows within a range</h1><p>Resize the preview and inspect its computed font size.</p>

Parameters and values

  • calc() (function): Performs math, mixing different units
  • min() (function): Uses the smallest of the given values
  • max() (function): Uses the largest of the given values
  • clamp(min, val, max) (function): Fluidly scales val, bounded between min and max

Best practices

  • Use clamp() for fluid typography instead of setting different font-size values in multiple media queries
  • Use calc() whenever you need to mix units, like subtracting a fixed sidebar width from a 100% fluid container
  • Use min() to cap a fluid width so it never grows unreasonably large on very wide screens, without needing a max-width media query
  • Remember these functions can be nested and combined for sophisticated responsive behavior entirely within CSS, with no JavaScript needed

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading