CSS calc() function does not distribute the negative

Asked Jul 02 '20 at 12:51

Active Jul 02 '20 at 12:51

Viewed 105 times

Simple put, these are not the same

calc(100px - 50px - 25px) #is 25
calc(100px - calc(50px - 25px)) #is 75

The problem I'm facing is I was using Angular 5 and this was working:

$toolbar-height: calc(#{$icon-size} + 2*#{$icon-margin});
...
height: calc(100vh - #{$toolbar-height})

on angular 5 that was expanded to:

calc(100vh - calc(28px + 2*0.72rem))

so the math is 100 minus the sum of 28 and 2 times 0.72

now is

calc(100vh - 28px + 1.44rem)

The nested calc is gone. So instead of substracting 28px+1.44rem now is substracting 28px and adding 1.44rem

is there anything wrong with this approach? is there a workaround for this?

asked Jul 02 '20 at 12:51

Rodrigo Silva

Does this answer your question? [calc() function inside another calc() in CSS](https://stackoverflow.com/questions/27597034/calc-function-inside-another-calc-in-css) – Dejan.S Jul 02 '20 at 13:01
I see it's distributing the `-` correctly here https://jsfiddle.net/hczkjwxm/ both divs are the same width – arieljuod Jul 02 '20 at 13:04
could it be is a sass+angular problem? – Rodrigo Silva Jul 03 '20 at 14:03

0 Answers0