How to debug css?

Question

css

Hello, I want to make sure that the appearance of the scroll does not shift the elements, for this I
know the width of the $width: 100vmin;
div I know the width of the appearing scroll I $scroll-width: 0.5vmin;
eat to calculate the width of the scroll in realtime using (offsetWidth - clientWidth ) $realtime-scroll-width: calc(#{$width} - 100%);(there are no paddings and borders)
I calculate the offset for the missing scroll

$scroll-additional-gap: calc(#{$scroll-width} - #{$realtime-scroll-width});

But apparently this is not considered correct and I don’t know how to debug the values ​​​​or look at the intermediate result, is it possible to debug css with respect to pixel values ​​\u200b\u200b(for example, to find out what 100% is equal to)

Answer 1

In the comments I wrote that it is better to solve the problem with Javascript.
But in css you can do something like this:

We pay attention to the red right square - it does not move.