Prevent scroll-bar from adding-up to the Width of page on Chrome
All you need to do is add:
html {
overflow-y: scroll;
}
In your css file as this will have the scroller whether it is needed or not though you just won't be able to scroll
This means that the viewport will have the same width for both
DISCLAIMER: overlay has been deprecated.
You can still use this if you absolutely have to, but try not to.
This only works on WebKit browsers, but I like it a lot.
Will behave like auto
on other browsers.
.yourContent{
overflow-y: overlay;
}
This will make the scrollbar appear only as an overlay, thus not affecting the width of your element!
Probably
html {
width: 100vw;
}
is just what you want.