The Issue

While building out an unnecessarily complex header component for a client project, I discovered that the calc() function I used in one of my width declarations was not being honored in IE 11 or lower. More specifically, IE 10 and IE 11 did not like that I was nesting a calc() inside of another calc().

The Fix

I finally narrowed it down to the fact that IE doesn't care if you nest calculations inside of each other, but it does care about seeing the calc() function name nested inside another.


width: calc(100vw - calc(20% - 10px));

By removing the second function name, IE 10 and IE 11 calmed down and started behaving properly.


width: calc(100vw - (20% - 10px));

Once I realized what was happening, it seemed glaringly obvious why the latter code snippet is preferred. Calling calc() to declare that you want to do some math is only needed one time, anything inside that initial function call is going to be calculated. If "multi-step" calculations are required, use parenthesis to denote order of operations.

1,700 0 9