How can I add right padding (for example 8px) to my element only if the vertical scrollbar is visible? I want to avoid adding standard padding to maintain symmetry of elements. In my case, I am using overflow-y as auto and column flexbox.

To illustrate my goal:

I am aware that I can compare scrollHeight and clientHeight to determine the visibility of the vertical scrollbar. However, I want to achieve this without using JavaScript, only with CSS properties. I have tried to find some CSS properties like scroll-padding-right or scroll-margin-right, but it seems they do not work as I expected based on their names. I also attempted to add a left margin to the scrollbar, scrollbar thumb, scrollbar track, etc., but I was unable to achieve my goal.

Is it possible to achieve scrollbar padding using only CSS?

Thanks in advance.