calc() function inside another calc() in CSS

Question

How do I use a CSS calc function inside another CSS calc function? According to this post it is possible but there is no example of that.

Answer 1

The reference you quoted is admittedly a bit confusing.

It is not possible to use a calc function inside another calc.

From the specs here: http://dev.w3.org/csswg/css-values/#calc-notation

...Components of a calc() expression can be literal values, attr() or calc() expressions, or values..

You can have calc expression inside the expressions, but not the calc() function itself.

And an example is given in that ref for nested expressions:

width: calc(100%/3 - 2*1em - 2*1px);

And also for multiple calc for multiple properties:

margin: calc(1rem - 2px) calc(1rem - 1px);

The syntax from the spec above:

The syntax of a calc() function is:

 = calc(  ) 
 =  [ [ '+' | '-' ]  ]* 
 =  [ '*'  | '/'  ]* 
 =  |  |  | (  ) 

Where a is a dimension.

In addition, whitespace is required on both sides of the + and - operators. (The * and / operaters can be used without whitespace around them.)

UAs must support calc() expressions of at least 20 terms, where each NUMBER, DIMENSION, or PERCENTAGE is a term. If a calc() expression contains more than the supported number of terms, it must be treated as if it were invalid.

.