Если появление классической полосы прокрутки сужает содержимое панели, зарезервируйте под неё место через scrollbar-gutter. На Mentoring.digital покажем настройку отдельного контейнера и условия, при которых визуального зазора не будет.
Минимальная настройка контейнера
Высота ограничивает панель, overflow: auto включает прокрутку при необходимости, а stable сохраняет место под классическую полосу и до переполнения.
.panel {
max-height: 12rem;
overflow: auto;
scrollbar-gutter: stable;
}Свойство относится к прокручиваемому блоку. Его задача состоит в резервировании области, а не в выборе цвета или толщины полосы прокрутки.
Зачем нужен both-edges
Если область под полосу образовалась у одного из краёв по направлению строки, both-edges добавляет такую же область у противоположного края. Это может быть полезно, когда содержимое должно оставаться визуально центрированным.
.panel {
max-height: 12rem;
overflow: auto;
scrollbar-gutter: stable both-edges;
}Не добавляйте симметричную область автоматически: сначала проверьте, нужен ли дополнительный отступ вашему макету. При узком контейнере он уменьшает доступное место для текста.
Почему результат зависит от полос прокрутки
Классические полосы занимают собственную область. Overlay-полосы рисуются поверх содержимого и не создают такую область. При overlay-режиме stable не резервирует пустой зазор. Поэтому отсутствие видимого отступа ещё не показывает, что правило не применилось.
Сравните панель с коротким и длинным содержимым, проверьте выравнивание соседних элементов и узкую ширину. Отдельно посмотрите среду с классическими и с overlay-полосами. Результат одного браузера с одной настройкой системы не описывает все варианты.
Практику CSS можно пройти на курсах фронтенд-разработки. Разобрать сдвиги конкретного макета поможет наставник по фронтенду.
