How to Debug CSS Calc() Value

css calc invalid property value

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

calculation in css variable is not working

Docs
When it comes to multiplication and division you don't need to specify the unit, because it's just not needed

calc(100vw * 5px)

Why px specifically all we want is to multiplay the first value by 5, And same goes for division.

However you can add and subtract other units together.

demo

div {  background: red;  margin-bottom: 5px;  height: 50px;  white-space: nowrap;  color:white;}/* At least one must be a number */div:nth-child(1) {  width: calc(100px * 3);}
div:nth-child(2) {  width: calc(100vw * 50vh);}

/* the right side must be a number */div:nth-child(3) {  width: calc(300px / 2);}
div:nth-child(4) {  width: calc(2 / 200px);}
/* both can be units */
div:nth-child(5) {  width: calc(200px + 3em);}
div:nth-child(6) {  width: calc(100px + 10vh);}
div:nth-child(7) {  width: calc(200px - 20pt);}
div:nth-child(8) {  width: calc(100vw - 50vh);}

<div>calc(100px * 3);</div><div>calc(100vw * 50vh); Invalid treated as auto(default)</div>
<div>calc(300px / 2);</div><div>calc(2 / 200px); Invalid treated as auto(default)</div>
<div>calc(200px + 3em);</div><div>calc(100px + 10vh);</div><div>calc(200px - 20pt);</div><div>calc(100vw - 50vh);</div>

How do I rewrite my nested CSS calc operation

Nested calc is fine, but note that is not supported in IE11. Also, you need to maintain the spacing convention:

p {
  padding: calc(calc(5px + 5px) + calc(5px + 5px));
  border: 1px solid black;
}

<p>Hello! I have a padding of 20px!</p>

Attempt to use calc() in CSS does not work

line-height: calc(1.5 * (100vw - 50px));

try this and reduce the px according to your requirement.

CSS' calc() in styled-components

A funny tip about CSS calc:

whitespaces are required between +/-

meaning:

const styledDiv = styled.div`
  ${props => props.takeViewportHeight && `min-height: calc(100vh - 16px);`}
`

should work

Calc function doesn't work for exponentiation

As covered in the MDN docs, when using multiplication in calc(), at least one of the values has to be a number: either an integer or a floating point number, but unitless.

This means these are valid values:

calc(1% * 2);
calc(3 * 10px);

And these are not:

calc(1% * 1%);
calc(10px * 10px);