I'm writing a calculation for the left property of an absolutely positioned element. After reading the syntax the only thing I can think of is that I'm trying to multiply two different units but I can't find confirmation for that as I thought the first calculation would have resolved to an integer.

left: calc(1vw * ((100vw / 100) * 1.2));

I need to capture the full size of the viewport so 100vw and then divide it by 100. So if the screen is 1600px this should resolve to 16, then multiply by 1.2 so now it is 19.2 and finally multiply by 1vw to convert it to 19.2vw. The issue I can't confirm is whether the first calculation resolves to an integer (16) or a measurement (16px). If the former then I have no idea why this isn't working. If the latter, how do I get around this?

CodePudding user response：

calc() can only take a single expression. To use multiple nested expressions, you need to multiple nested calc() functions. In your case:

left: calc(1vw * calc(calc(100vw / 100) * 1.2)));

But note, since you're not combining multiple different units (like px and vw), the above is the equivalent to writing:

left: 1.2vw;

Because:

calc(100vw / 100) is the same as 1vw

calc(1vw * 1.2) is the same as 1.2vw

calc(1vw * 1.2vw) is the same as 1.2vw

CodePudding user response：

See MDN on calc:

Multiplication. At least one of the arguments must be a number.

Your expression is trying to multiply 1vw by another vw amount and hence is not valid.