Как сделать чтобы padding-right добавлялся только при overflow?

Чттобы добавить padding-right только в случае, если содержимое элемента выходит за его границы (overflow), можно воспользоваться CSS свойством overflow и псевдоэлементом ::after.

Для начала установим стиль overflow: auto или overflow: scroll для контейнера, в котором мы хотим видеть padding-right только в случае overflow. Например:

.container {
  overflow: auto;
}

Затем, используем псевдоэлемент ::after, чтобы добавить padding-right, если содержимое выходит за пределы контейнера. Пример кода:

.container::after {
  content: '';
  display: block;
  height: 1px;
  padding-right: 10px; /* настраиваемый отступ справа */
}

Теперь, если содержимое контейнера будет выходить за его границы по горизонтали, псевдоэлемент ::after добавит дополнительный padding-right, что создаст пространство для прокрутки. В противном случае, если контент не переполняет контейнер, padding-right не будет отображаться.

Этот подход позволяет создать динамическое отступ справа, который будет виден только при появлении overflow, что обеспечивает элегантную обработку случаев выхода содержимого за границы контейнера.