Mgiyuk

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; ...