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/