Почему настройки calc() применяются после загрузки сайта?

Question

[WebforSelf]

Заметил странный момент на сайте
Есть плитка из товаров

.products-list__item {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -ms-flexbox;
    display: flex;
}
.products-list--grid--4[data-layout=grid] .products-list__item {
    margin: 10px;
    width: calc((100% - 80px) / 4);
}

Соответственно с помощью calc мы делим товары на 4 колонки.

в мобильной версии

@media (max-width: 419px) {
.products-list--grid--4[data-layout=grid] .products-list__item {
    margin: 2px;
    width: calc((100% - 16px) / 2);
}
}

Товары идут в 2 ряда. Но почему то на мобильном при прогрузке товар появляется сначала один на всю ширину, а после полной загрузки становится в 2 ряда. Получается что calc обрабатывается после полной загрузки страницы?

Comments

[Вадим]

Получается что нужна демка или ссылка на пример.
calc работает в real-time.