Use calc() when a UI needs to preserve a fixed amount of space while the available space changes. It evaluates arithmetic in a CSS value, so you can express relationships such as “full width minus the gutter” instead of hardcoding a measurement. The browser resolves compatible units and reevaluates the result as relevant dimensions change. section 3.2.2 section 6.3.3
Expressions support addition, subtraction, multiplication, and division. Put spaces around + and -; use parentheses to control precedence. Values must have compatible types: lengths can combine with lengths and angles with angles, but a length cannot combine with an angle. For multiplication or division, one operand must be a scalar, and a divisor must appear on the right. section 3.2.1
Keep a dialog inside the viewport
A dialog can fill the viewport while retaining 20px of breathing room on every edge. calc() converts the viewport-relative value and fixed pixels into a computed width or height; when the viewport changes, the dialog size updates too. .dialog { width: calc(100vw - 40px); max-width: 500px; max-height: calc(100vh - 40px); } section 3.2.2
Mixed-unit math is useful because each unit contributes a different relationship. In width: calc(100% - 2rem), the percentage comes from the parent width and rem comes from the root font size before subtraction. Keep scale understandable by using consistent base units where possible and making the relationship explicit. section 3.1.5 section 3.1.6
Divide container space among columns
Subtract the total gutter width before dividing the remainder among columns. This makes three columns and two 20px gutters fit exactly within their container. .container { width: 90vw; } .column { width: calc((100% - 40px) / 3); margin-right: 20px; } .column:last-child { margin-right: 0; } section 3.5.5
calc() also supplies a responsive term plus a stable base for typography. For example, calc(2vw + 1rem) grows with viewport width while retaining the rem contribution. Pair it with min(), max(), or clamp() when a fluid value also needs lower or upper limits. section 8.2.2 section 6.5.6
Listing 3.4 Using calc() to size a dialog overlay
.dialog {
width: calc(100vw - 40px); #1
max-width: 500px;
max-height: calc(100vh - 40px); #2
}
Inspect the dialog listing to connect viewport units, fixed edge space, and the resulting responsive overlay dimensions. section 3.2.2
The practical takeaway is simple: use calc() for linear layout relationships that must remain true across changing sizes—available width after padding, equal columns after gutters, or viewport-based dimensions with fixed offsets. Use constraints when the result must stop growing or shrinking. section 3.5.5 section 6.5.6
