i'm working on a project where the main content is calculated as:
$content-height: calc(100vh - 50px - 62px);
inside the content I have a table which height is calculated as:
height: calc(#{$content-height} - 62px - 50px/2 - 66.1px);
in Chrome the output is:
height: calc(calc(100vh - 50px - 62px) - 62px - 50px/2 - 66.1px);
and it works fine.
in Internet explorer (11) this doesn't work.
when i remove the inner calc
like:
height: calc((100vh - 50px - 62px) - 62px - 50px/2 - 66.1px);
it works fine.
iv'e searched the web for answers for this topic but found none. any help would be appreciated
Apparently, this should have worked (https://stackoverflow.com/a/36414853/1869660), but since it doesn't, you can make a SASS function to help creating valid
calc
expressions:Usage:
Example: http://codepen.io/Sphinxxxx/pen/NbZLqd?editors=0100