CSS Math Functions

Imagine a tailor who only ever cuts fabric to fixed sizes, small, medium, or large. If a customer needs something in between, the tailor is stuck. Now imagine a tailor who can measure a customer on the spot and cut fabric to fit exactly, while never going smaller than a minimum or larger than a maximum size. That's what CSS math functions do for layouts. calc(), min(), max(), and clamp() let you do arithmetic and set flexible bounds directly inside your CSS values, so sizes can respond to the viewport instead of being locked to one fixed number.

In this page:

The calc() Function
The min() Function
The max() Function
The clamp() Function
Combining Math Functions With Custom Properties

The calc() Function

calc() lets you mix units like percentages and pixels in a single expression, so you can subtract a fixed sidebar width from a fluid container width. This is one of the most useful CSS functions for responsive layouts, since it removes the need for JavaScript to compute mixed-unit sizes.

Note: Always leave a space on both sides of + and - inside calc(); the operator would otherwise be parsed as part of the unit.

Warning: Multiplication and division must involve at least one plain number, you cannot multiply two length units together.

Example: The calc() Function

css

<style>
.box {
  width: calc(100% - 50px);
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Fluid width minus a fixed sidebar</div>

The min() Function

min() picks the smallest value from a comma separated list, so a box can shrink on small screens without ever exceeding a fixed maximum. This is commonly used to cap a value at a maximum while still letting it shrink freely on smaller screens.

Note: Use min() to cap a fluid width, for example min(90%, 600px) never grows wider than 600px.

Warning: min() still needs valid comparable units, comparing a percentage to a plain unitless number is invalid.

Example: The min() Function

css

<style>
.box {
  width: min(90%, 600px);
  background: lightblue;
  padding: 10px;
}
</style>
<div class="box">Never wider than 600px, shrinks freely below that</div>

The max() Function

max() picks the largest value from a list, guaranteeing a minimum size even as other values shrink. This is the mirror image of min(), commonly used to enforce a comfortable minimum readable font size.

Note: Combine max() with viewport units to guarantee readable text, max(16px, 1vw) never drops below 16px.

Warning: max() does not clamp an upper bound, pair it with min() or clamp() if you also need a ceiling.

Example: The max() Function

css

<style>
p {
  font-size: max(16px, 1vw);
}
</style>
<p>Never smaller than 16px</p>

The clamp() Function

clamp(minimum, preferred, maximum) fixes a value between a floor and a ceiling while letting the preferred value flex in between, ideal for fluid typography. A single clamp() call often replaces several media queries that would otherwise be needed to adjust a value at different breakpoints.

Note: Use clamp() for headings so text scales smoothly with the viewport without needing multiple media queries.

Warning: The preferred value must be capable of changing, a fixed unit like clamp(16px, 20px, 24px) will just always resolve to 20px.

Example: The clamp() Function

css

<style>
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}
</style>
<h1>Scales fluidly between a floor and a ceiling</h1>

Combining Math Functions With Custom Properties

Math functions can reference CSS custom properties, letting you centralize a base value and derive several related sizes from it. This pattern keeps a whole design system's spacing or type scale consistent by deriving every size from one shared variable.

Note: Store a base spacing unit in a custom property, then reuse calc() with that variable throughout your stylesheet for consistent spacing.

Warning: Custom properties used inside calc() must resolve to a valid length or number, an empty or invalid variable breaks the whole expression.

Example: Combining Math Functions With Custom Properties

css

<style>
:root {
  --base: 8px;
}
.box {
  padding: calc(var(--base) * 2);
  background: lightblue;
}
</style>
<div class="box">Derived from one shared base value</div>

Common Mistakes

Forgetting the required spaces around + and - operators inside calc(), writing calc(100%-20px) instead of calc(100% - 20px).
Assuming clamp() arguments can be in any order; the syntax is always clamp(minimum, preferred, maximum).
Mixing incompatible units without realizing calc() can combine them, missing chances to combine % and px in one expression.

Chapter Summary

calc() performs arithmetic between different units directly inside a CSS value.
min() and max() pick the smallest or largest of a list of values, useful for responsive limits.
clamp(min, preferred, max) combines both, giving a fluid value that never shrinks or grows past set bounds.

Browser Support

calc(), min(), max(), and clamp() are supported by all modern browsers, including Chrome, Firefox, Safari, and Edge.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Masking Next Lesson → CSS Motion Path