Detailed explanation
The CSS calc() function calculates a value directly inside a CSS declaration. It supports addition (+), subtraction (-), multiplication (*), and division (/), making it useful when a layout combines relative dimensions with fixed offsets. For example, .sidebar { width: calc(100% - 250px); } gives the element its containing block’s width minus 250 pixels. Similarly, .hero { height: calc(100vh - 64px); } creates a hero section based on the viewport height while subtracting a fixed header height. This often avoids JavaScript calculations for straightforward responsive sizing.
Under the hood, the browser parses calc() as a typed mathematical expression, not as a string substitution or general-purpose script. The result must be valid for the property receiving it. For width, percentages and lengths can be combined because that property provides a basis for resolving the percentage. The browser may preserve a mixed-unit expression until layout supplies the necessary dimensions, then resolve it into a usable value. Relative inputs are reevaluated when their relevant context changes. However, calc() cannot make an otherwise unresolved percentage meaningful; percentage heights still depend on the containing block’s sizing rules.
Normal arithmetic precedence applies: multiplication and division come before addition and subtraction, and parentheses can control grouping. Write whitespace around binary + and - operators: calc(100% - 20px), not calc(100%-20px). Spaces around * and / are optional but improve readability. Addition and subtraction require compatible value types, so calc(10px + 2s) is invalid. For broadly compatible code, use a unitless number as a multiplication factor or a nonzero unitless divisor, such as calc(2 * 1rem) or calc(100% / 3). Newer typed arithmetic supports additional operations, but browser support should be checked.
calc() also works with custom properties, for example width: calc(100% - var(--sidebar-width)). It does not measure arbitrary elements or replace layout tools such as Flexbox and Grid. Interviewers usually look for correct syntax, an understanding of percentage references and type constraints, and a realistic use case rather than arithmetic alone.
Key points to remember
- Use calc() to combine compatible values, such as percentages, viewport units, and pixel offsets.
- The resulting value must match the CSS property’s accepted types.
- Binary + and - require surrounding whitespace; parentheses control grouping.
- For broad compatibility, multiply by a unitless number or divide by a nonzero unitless number.
- Relative values remain responsive, and custom properties can supply calculation inputs.
Common mistakes candidates make
- Omitting whitespace around + or -, producing invalid expressions such as calc(100%-20px).
- Combining incompatible types or assuming every arithmetic operation is supported across browsers.
- Assuming 100% always means the viewport, or that calc() automatically accounts for padding, borders, and siblings.
Likely follow-up questions
How does calc() differ from min(), max(), and clamp()?
calc() evaluates an arithmetic expression, whereas min() and max() select the smallest or largest candidate value. clamp() constrains a preferred value between a minimum and maximum, making it useful for fluid typography and bounded sizing.
Can calc() use CSS custom properties?
Yes: width: calc(100% - var(--sidebar-width, 250px)) uses a custom property with a fallback. The substituted value must still produce a valid expression; the fallback does not automatically fix an existing custom property containing an incompatible value.
Why can an element overflow despite using width: calc(100% - 20px)?
With the default content-box sizing, padding and borders are added outside the calculated content width, potentially causing overflow. box-sizing: border-box includes padding and borders within the specified width, but margins remain outside it.
Interview tip: Explain one fixed-offset layout example, then mention whitespace, type compatibility, and what the percentage references.