Compensate scrollbar space when hiding them with padding with CSS

The issue I've looked through a lot of SO questions, yet still fail to achieve desired results.

A common trick to hide scrollbars is described in this question: use overflow: hidden on parent and hide scrollbar with padding-right: <x>px. But here is the pitfall: if you try to use full width of parent - you can't, because even though you can hide scrollbars with padding-right, their space is still taking parent width, so child can only use 100% - scrollbarWidth, which depends on browser and OS.

overflow: hidden

padding-right: <x>px

padding-right

100% - scrollbarWidth

Fiddle of the problem from linked question.

What I wonder about is if there is a way to use CSS tricks to be able to use that width.

* {
margin: 0;
}

#container1 {
height: 200px;
width: 200px;
border: 1px solid green;
overflow: hidden;
}

#container2 {
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
text-align: justify;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id viverra nulla, in sagittis nisl. Duis enim velit, lobortis ut posuere in, mattis vitae leo. Nulla at leo vehicula, gravida eros vitae, convallis nisi. Vivamus ullamcorper nisi neque, nec
elementum tortor egestas quis. Mauris aliquam libero velit, eget bibendum risus feugiat sed. Ut iaculis euismod dui, at hendrerit risus sodales id. Proin venenatis egestas turpis, nec fermentum odio tincidunt vel. Proin sit amet posuere diam. Vestibulum
varius est ac finibus efficitur. Pellentesque arcu libero, imperdiet vel mi quis, molestie tempus lorem. Nunc at congue lorem. Sed interdum convallis finibus. Cras mi nibh, faucibus eget leo ultricies, elementum maximus ante. Etiam varius rhoncus
dignissim. Etiam ut lectus faucibus, finibus tellus vitae, suscipit dui. Vivamus finibus risus in feugiat pretium. Etiam laoreet purus mi, eu dapibus libero semper ut. Maecenas gravida venenatis nunc et elementum. Fusce facilisis vulputate dui, at
volutpat dolor.

<div>

but the question is : if you don't have the scroll bar and you don't want to show it, then you will never be able to scroll the text, then why having an overflow?
– Temani Afif
2 days ago

@TemaniAfif fiddle and example are scrollable and that's the intended behavior. The reason to hide native scrollbars is to show custom. But this 15-20px space breaks UI.
– lolbas
2 days ago

In Mac OSX + chrome, I can see no difference. The scroll bar is initially appearing over the text.
– Akash Pinnaka
2 days ago

@AkashPinnaka El Captain + Chrome v67 here, no scrollbars inside the box..
– lolbas
2 days ago

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.