CSS Math Functions

The CSS math functions allow mathematical expressions to be used as property values. This is especially useful for responsive design, where a value needs to adapt to the viewport or container while still respecting fixed bounds.

Here we explain the calc(), max(), and min() functions.

All CSS Math Functions

The calc() Function

The calc() function performs a calculation to be used as the property value. It lets you mix different units (such as % and px, or vw and rem) in a single expression (that is something plain CSS values cannot do).

CSS Syntax

property: calc(expression)

where:

• expression is a mathematical expression. The result is used as the value. The following operators can be used: +, -, *, /. This is a required parameter for the calc() function.

Example

Use calc() to calculate the width of a <div> element so that it fills the container minus a fixed offset:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Here the element is positioned 50px from the left edge and its width is 100% - 100px, so it always leaves exactly 50px of free space on the right side of its containing block.

Mixing units

The real power of calc() is combining units that CSS could not otherwise blend:

.hero {
  /* font size grows with the viewport but keeps a rem baseline */
  font-size: calc(1rem + 2vw);

  /* full width minus a sidebar and a gap */
  width: calc(100% - var(--sidebar-width) - 20px);
}

You can also nest other math functions inside calc():

.card {
  width: calc(min(50%, 600px) - 2rem);
  height: calc(max(30vh, 300px) + 1em);
}

When to use calc()

• You need to mix units (e.g. 50% + 10px).
• You want to combine a fluid value (%, vw, vh) with a fixed offset (px, rem).
• You are working with CSS custom properties (var(--gap) * 2).

The max() Function

The max() function uses the largest value, from a comma-separated list of values, as the property value.

CSS Syntax

property: max(value1, value2, ...)

where:

• value1, value2, ... is a list of comma-separated values from which the largest is chosen. This is a required parameter for the max() function.

Example

Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

How it behaves responsively

The browser evaluates every argument against the current layout and picks the largest one at render time:

• On a wide container where 50% is more than 300px (container wider than 600px), the width is 50%.
• On a narrow container where 50% is less than 300px (container narrower than 600px), the width is 300px.

So max(50%, 300px) acts as a minimum width: the element is at least 300px wide, and grows to 50% when there is room.

When to use max()

• You need a lower bound, i.e. "at least this big".
• You want to prevent an element from shrinking below a usable size on small screens.

The min() Function

The min() function uses the smallest value, from a comma-separated list of values, as the property value.

CSS Syntax

property: min(value1, value2, ...)

where:

• value1, value2, ... is a list of comma-separated values from which the smallest is chosen. This is a required parameter for the min() function.

Example

Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

How it behaves responsively

• On a wide container where 50% is more than 300px (container wider than 600px), the width is 300px.
• On a narrow container where 50% is less than 300px (container narrower than 600px), the width is 50%.

So min(50%, 300px) acts as a maximum width: the element never exceeds 300px, and shrinks to 50% on small screens.

When to use min()

• You need an upper bound, i.e. "no bigger than this".
• You want to cap a fluid value so content stays readable on large screens.

Bonus: The clamp() Function

clamp() combines a minimum, a preferred value, and a maximum in one call, and is often the most convenient of the three for responsive typography and spacing.

CSS Syntax

property: clamp(minimum, preferred, maximum)

Example

h1 {
  /* never smaller than 1rem, ideally 5vw, never larger than 3rem */
  font-size: clamp(1rem, 5vw, 3rem);
}

Choosing the Right Function

A common responsive workflow is to use min()/max() (or clamp()) for fluid scaling that stays within sensible bounds, and calc() when you need to combine or offset those values.