CSS' calc() in styled-components

Question

Trying this:

const styledDiv = styled.div`
  ${props => props.takeViewportHeight && `min-height: calc(100vh-16px);`}
`

It's not working. Am I missing something about calc in styled components?

Answer 1

A funny tip about CSS calc:

whitespaces are required between +/-

meaning:

const styledDiv = styled.div`
  ${props => props.takeViewportHeight && `min-height: calc(100vh - 16px);`}
`

should work