How does calc() work and when should you use it?

calc lets you combine lengths, percentages, viewport units and custom properties in one expression. It is evaluated by the browser after relative units resolve, so it can express relationships that would otherwise need JavaScript or magic numbers.

.sidebar {
  width: calc(100% - 16rem);
  padding: calc(1rem + 2vw);
}

.full {
  min-height: calc(100svh - 4rem);
}

Rules and limits

• + and - must have whitespace on both sides
• * and / do not require spaces, but division must be by a unitless number
• You can nest min(), max() and clamp() inside calc
• Custom properties can hold expressions, but malformed substitution invalidates the declaration
• Division by zero makes the expression invalid rather than returning Infinity
• Compatible units are required; you cannot add a length to a color

A common use is subtracting a fixed header from a dynamic viewport height. Another is mixing a percentage with a gap width. If the layout itself can express the relationship, such as flex or grid with gap, prefer the layout system over calculating widths manually.