Scroll bars not overlaying correctly

I’m trying to add scroll bars to my app so that individual sections can be scrolled, and I am expecting the styling to look like this: see desired behaviour.

However when I first load my page the scroll bars are appearing attached to the right of the parent div, rather than within it, or according to the inspector, in just enough width of padding for them to sit in. See incorrect behaviour

Currently to enable my show less/ show all option, the scroll behaviour is changed in the JS so perhaps resetting scroll behaviour is causing this?

I have tried to change the scrollbar-gutter property to auto, however this doesn’t seem to affect the scroll-bar behaviour in this case.

I have also tried to find other ways of styling the scroll bars but doesn’t seem to be much of that around.

Any help is appreciated!