css calc invalid property value

You can't divide by units like px, only numbers.

When using calc() you can't divide by pixels, you can only divide by unitless numbers. Also, the number you are dividing has to have a certain unit like px, em, vh, vw.

For example, if you need to set a width of an element you should use:

width: (100px / 2); //this equals to 50px

An important note is to make sure you put spaces between the operator signs. This calc() article provides further detailed explanation on the function.

As @cssyphys noted above, you have to have spaces around your minus sign. However, if you are using ASP.NET MVC's bundler/minifier you find that it removes the spaces so you get the noted error.

If you are using plain CSS3, the following expression can be used in CSS and won't get minified:

width: calc((100%) - 50px);

HOWEVER, if you are using LESS (and perhaps other CSS preprocessors?), the preprocessor will "optimize" your expression and rip out your inner parens, again resulting in something ASP.NET will botch up. To get around that, use LESS's "don't process" tilde expression:

width: calc(~"(100%) - 50px");

I had to go back and change a bunch of calc() statements but so worth it to get back my ASP.NET minification.

For future googlers:

The unhelpful "invalid property value" message in DevTools might just mean that you need white space around your + - / * operators.

Incorrect (invalid property value):

width:calc(100vh-60px)  <== no spaces around minus sign

Correct:

width:calc(100vh - 60px) <== white space around the minus sign

The OP's question above does not have this problem, but while googling an answer to this error message this is the first resource I found, so it should have an answer dedicated to this common error.

References:

CSS3 calc() not working in latest chrome

https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/