TIL my 100vw needs a max-width

January 25, 2021

TL;DR; If you want an element to be full screen and it’s inside of a parent element that is full screen, use width:100% instead of width:100vw to avoid the scrollbar sized white space

I’m not sure how I haven’t come across this,or if I have, I don’t remember. I was working on a layout and had a position: absolute; div, and I wanted it to be the width of the screen. I reached into my tool box of css and grabbed my trusty width:100vh;, but after I applied the style, I noticed an odd white bar on the right hand side of the screen.

This is actually “a feature, not a bug”, and it has everything to do with the scroll bar on the right side of the screen. Since the scrollbar is covering up the right 5px of the screen, when you tell the browser that you want your block to be the width of the screen, it thinks it’s stealing those 5px away from your design and in response gives you an extra 5px that you can scroll to.

A couple options I see are to apply a global rule to the body such as:

max-width: 100%;
overflow: hidden;

Although this will leave you with some other problems down the road when items inside your 100vw block seem a little too close to the right side of the screen.

A better option would be to set the max width of the block to 100% or even better, just use width:100%