Operations with calc on CSS properties

[michel-leanon]

Hey!

Can I use the "calc" function to calculate sizes on CSS?

CSS Example:
width: calc(100vh - 150px);

Is it possible on ChakraUI ?

[malashevskyi]

Why not? I recently used calc to change modal size
example

<ModalContent
  maxW="calc(100vw - 50px)"
  minH="calc(100vh - 25px)"
  my="auto"
>

[Shaad-Industries]

Great it's working.👍

[sheryarshirazi]

@michel-leanon
how can measure units in calc function? like 16

<Box as="header" h={16} />
<Box
  minH="calc(100vh - 4rem)"
>

[tannerbaum]

As far as I know, you have to use their css variable names. So for example --chakra-sizes-16 (or whatever it is called)

[sheryarshirazi]

thanks @tannerbaum , it works.

[jruizsilva]

If you want to use calc with percentages you can try

<Box
  width={calc('100%').subtract('500px').toString()}
>

This also works
`

<Box
  width={`${calc(100% -500).toString()}px`}
>

I hope it works for you