"VW" CSSの単位は、Chromeで

Question

新しいvw（およびvh、vminとvmax）が動作していないCSS単位calcがあるとして、非常に便利です。どちらもChromeでうまくいきますが（後者は-webkit-calcという接頭辞ですが）、なんらかの理由で、単位を含むcalcの値（たとえば、）が無効なプロパティ値を生成することがわかりました。これはまだ実装されていないのですか？仕様、またはバグですか？

Answer 1

Bug 94158として登録されているバグです.Calcはビューポート単位で動作しません。

Answer 2

これは古いバグであり、修正されていますが、以前のバージョンのChromeをサポートしていて、Androidタブレットの古いバージョンのChromeでこのバグに遭遇している場合は（私の場合）、このバグを回避する簡単な方法は次のとおりです。

対象のVWにまたがるラッパーを使用し、calc（...）のビューポート単位を使用する代わりに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); 
}