"Vw" CSS Units in Calc in Chrome Not Working

vw CSS units in calc in Chrome not working

It’s a bug, registered as Bug 94158 - calc isn't working with viewport units.

CSS3 calc(100%-88px) not working in Chrome

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

^{This article mentions that the spacing is necessary for unambiguous parsing.}

Bad: calc(100%-88px)

Good: calc(100% - 88px)

---

How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.

A property that is struck through when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

---

2022 Update - calc() is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.

CSS Calc Viewport Units Workaround?

Before I answer this, I'd like to point out that Chrome and IE 10+ actually supports calc with viewport units.

FIDDLE (In IE10+)

Solution (for other browsers): box-sizing

1) Start of by setting your height as 100vh.

2) With box-sizing set to border-box - add a padding-top of 75vw. This means that the padding will be part f the inner height.

3) Just offset the extra padding-top with a negative margin-top

FIDDLE

div
{
    /*height: calc(100vh - 75vw);*/
    height: 100vh;
    margin-top: -75vw;
    padding-top: 75vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: pink;
}

Safari + CSS: using calc with vh does not work

Safari seems to be kind of buggy with viewport units in general, especially if you go back a version or two. The last time I tried to use vh/vw, I ran into similar issues and ended up making use of the v-unit javascript micro-lib, and it worked out very well.

CSS is rapidly catching up to javascript for things like layout calculations, but when it gets complex, supplementing your css with some light scripting often works better than CSS alone.

CSS3 nested calc function using multiply and vw not rendering

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.

---

Related Topics