The calc() Function Explained

What calc() Does

calc() lets CSS perform arithmetic directly in a property value, and - critically - lets that arithmetic mix different units together, something plain CSS values cannot do on their own.

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

This sizes the sidebar's sibling to take up all remaining space after a fixed 250px column is subtracted - impossible to express with a single plain value, since % and px cannot normally be mixed.

Supported Operators

A Small but Important Syntax Rule

/* Correct: spaces required around + and - */
width: calc(100% - 20px);

/* Incorrect: missing spaces breaks parsing */
width: calc(100%-20px);

The + and - operators must have a space on both sides, or the expression fails to parse - this trips up many people the first time they use calc().

Using calc() with Custom Properties

:root { --gap: 16px; }
.grid {
  width: calc(100% - var(--gap) * 2);
}

When calc() Is the Right Tool

Reach for calc() whenever a size genuinely needs to combine two different kinds of measurement - a percentage-based container minus a fixed sidebar, or a viewport unit plus a fixed padding value - rather than trying to approximate it with a single hardcoded value.