evenly - Las unidades CSS "vw" en calc en Chrome no funcionan

caniuse

Question

Las nuevas unidades CSS vw (y vh , vmin y vmax ) son bastante útiles, como lo es calc . Ambos funcionan bien en Chrome (este último prefijado como -webkit-calc ), pero por alguna razón he encontrado que los valores de las propiedades de calc que incluyen las unidades v* , como el width: -webkit-calc(95vw - 25em) producen un inválido valor de propiedad. ¿Esto simplemente no está implementado todavía, o la especificación, o un error?

Answer 1

Es un error antiguo y se ha corregido durante mucho tiempo, pero si aún es compatible con versiones anteriores de Chrome, y específicamente se encuentra con este error en una versión anterior de cromo en una tableta Android que es compatible (como fue mi caso), aquí está el Una forma sencilla de evitar este error:

Use una envoltura que abarque el VW al que se dirige, y luego, en lugar de usar las unidades de la ventana gráfica en el cálculo (...), use el 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);
}

Answer 2

Es un error, registrado como Bug 94158 - calc no funciona con unidades de ventana gráfica .