HTML reserve space for scrollbar

overflow-y:overlay would be a partial solution to this as in, it solves the problem of not wanting the content layout to change when a scrollbar is added or removed. Extra padding or margin can be added so that scrollbar doesn't obfuscate the div behind

Here's the jsfiddle for the same https://jsfiddle.net/kitwradr/2qcsj6hw/

No browser support this property yet (2021), but scrollbar-gutter is a suggested solution for this.

Update: 2022 - all modern browsers except Safari support the property.

The only way to do this is to make the width of the items in the container fixed. And you'll have to be conservative with the width of the scrollbar.

   .container { 
       width: 200px;
       height: 200px;
       overflow: auto;
       overflow-x: hidden;
       border: 1px solid black;
   }
   .item {
       width: 200px;
...

https://jsfiddle.net/fr1jnmn6/1/