“vw” CSS units in calc in Chrome not working

Question

The new vw (and vh, vmin and vmax) CSS units are quite useful, as is calc. Both work fine in Chrome (the latter prefixed as -webkit-calc), but for some reason I've found that calc property values including the v* units, such as width: -webkit-calc(95vw - 25em) yield an invalid property value. Is this just not implemented yet, or the spec, or a bug?

Answer 1

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

Answer 2

It's an old bug and has long been fixed, but if you're still supporting older versions of chrome, and specifically encountering this bug in an older version of chromium in an Android tablet you're supporting (as was my case), here's the simple way you can get around this bug:

Use a wrapper that spans the VW you're targeting, and then instead of using the viewport units in the calc(...), use 100%.

html:

<div class="container">
    <div class="inner-calc-with-viewport-units-bugged" />
</div>

css:

.container { 
    width: 100vw; //or height: 100vh, depending on your usecase
}
.inner-calc-with-viewport-units-bugged { 
    width: calc(100% - XXXXX px); //or height: calc(100% - XXpx);
}