css calc invalid property value

css css-calc
Josh picture Josh · Nov 25, 2015 · Viewed 27.2k times · Source

Can someone tell me why this CSS calc function isn't working? When I inspect element on Chrome, it says 'Invalid property value'.

width: calc((100vw - 14px * 2) / (270px + 11px * 2));

Answer

cssyphus picture cssyphus · Mar 12, 2018

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/

Related questions

Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) If I use the literal 50px instead of my …

Read More
Less aggressive compilation with CSS3 calc

The Less compilers that I'm using (OrangeBits and dotless 1.3.0.5) are aggressively translating body { width: calc(100% - 250px - 1.5em); } into body { width: calc(-151.5%); } Which is obviously not desired. I'm wondering if there is a way to signal to the …

Read More
CSS Calc Viewport Units Workaround?

From what I've seen in other answers, CSS viewport units can't be used in calc() statements yet. What I would like to achieve is the following statement: height: calc(100vh - 75vw) Is there some workaround way I can achieve …

Read More