Ширина полосы прокрутки

Идея заключается в вычитании из полной ширины окна вместе с прокруткой ширину родительского контейнера. Сначала нужно сделать html контейнером.

html {
  container-type: inline-size;
  min-height: 120vh; /* Зададим высоту больше вьюпорта */
}

Также зададим высоту больше вьюпорта, чтобы полоса прокрутки вообще появилась. На реальной странице в этом нет необходимости, на ней будет реальный контент. Если контента меньше, чем на страницу, то ширина полосы прокрутки будет 0.

Ширина полосы прокрутки:

calc(100vw - 100cqw)

See the pen (@Websitio) on CodePen.

Немного пояснений к песочнице:

Цель вывести значение ширины полосы прокрутки в псевдоэлемент. Вообще, counter() в основном используется для счетчиков (глав, элементов списков), но в нём можно также хранить просто числа. Для этого заведём счётчик с именем scrollbar-width.

CSS не умеет просто взять px и сделать из него целое число, которое можно использовать в счётчике. Для этого используем функциональный трюк с тангенсом и арктангенсом. В результате будет число без исходных единиц измерения.