CSS vw is pretty useless.
The problem with vw is that, when you use vw for width, it gives you the width of the viewport which includes the scrollbar width as well. Whereas the scrollbars are not a part of the website width and are always variable across different devices.
So whenever you use say, 100vw, you would always get 100% of the browser width plus some extra width because of the scrollbars which makes vw pretty much unusable.
Is there any way you can ignore the scrollbar widths while using vw?
I also go for width: <x>%;.
The issue is overflow: auto assumes no scrollbar exists. Unfortunately, it's the default value.
Instead of caring to overwrite overflow on all containing blocks, I care for a fixed width value or auto calculated by Flexbox.
Here is a good read about the issue and workarounds:
Why not just use 100% ? Should be perfect for most cases. Outside of that you would have to do some device queries and add classes based on that to your main tag. Then if you know the pixle width of the particular scroll bar on each device you can use calc to get the width you're looking for.
Brandon
Frontend Developer
I use 100vw on a container with no overflow, and then overflow an element inside of the container.