Новые элементы CSS vw (и vh, vmin и vmax) весьма полезны, как и calc. Оба работают отлично в Chrome (последний префикс как -webkit-calc), но по некоторым причинам я обнаружил, что значения свойств calc, включая единицы v*, такие как width: -webkit-calc(95vw - 25em), дают недопустимое значение свойства. Это еще не реализовано, или спецификация, или ошибка?
"vw" CSS-единицы в Calc в Chrome не работают
Ответ 1
Его ошибка, зарегистрированная как Ошибка 94158 - calc не работает с единицами просмотра.
Ответ 2
Это старая ошибка и давно исправлена, но если вы по-прежнему поддерживаете устаревшие версии хром и особенно сталкиваетесь с этой ошибкой в более старой версии Chrome в Android-планшете, который вы поддерживаете (как и в моем случае), вот простой способ обойти эту ошибку:
Используйте оболочку, которая охватывает 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);
}