Nested calc operations

Question

Hopefully this is quite simple. I want to use the CSS calc operation to perform two calculations:

I want to set my width to the equivalent of

(100% / 7) - 2

However if I try to perform more than one operation in a CSS calc operation, it fails:

width: calc((100% / 7) - 2);

How can I perform multiple calc operations in one CSS statement?

user_9868445 · Answer

I also had a lot of headache when I tried to do that, but fortunately there's an alternative. Instead of writing it all in a single line, you could also use pure css variables using var(), which aside from solving this problem, is also much more readable! Here's an example of how I used it:

#wrapper .leftside .week .superior {
    --wholeWidth: calc(157px * 3);
    --remaining: calc(100% - var(--wholeWidth));
    margin: 0 calc(var(--remaining) / 6);
}

I found it under the "Nested calc() with CSS Variables" in the MDN docs.

Nested calc operations

3 Answers