Search code examples
csscalc

CSS3 nested calc function using multiply and vw not rendering


I've done some mathematics to find the series of a certain element in the background of my current website. I've narrowed down the precise location to:

bottom: calc((737px - ((100vw / 200px) * 64px)) + 70px)

But in Chrome, the developer tool has crossed it out as unrenderable.

I'm wondering what point in this calculation has failed?


Solution

  • You seem to expect the browser to figure out how much 200px (respectively 64px) is, as a ratio, from current browser width and automatically use that value.

    Current browser implementation of calc only allows multiplication and division with numbers:

    ... : calc(100vw / 3) // valid
    ... : calc(1200px / 3) // valid
    ... : calc(1200vw / 200px) // NOT valid
    

    See calc() current definition.