100vw and scrollbars

This seems like a bit of a strange decision by the spec authors.

Take a look at the following codepen:

Why does 100vw include the scrollbar width? The result of this is that if there’s a vertical scrollbar on the page, setting an element to 100vw causes a horizontal scrollbar. This seems like a very poor implementation to me, surely 100vw should be the visible area (ie excluding the scrollbar)

On pages that don’t have a vertical scrollbar, no horizontal scrollbar is created:

Where this gets particualrly annoying is when you’re trying to add several elements up to get to 100vw, you have to shoot for ~98 to be safe and even then it’s not perfect

Why not just use 100%?

100% works in most cases, I was just wondering why vw includes the scrollbar width, it limits its usefulness significantly.

Yes I agree, it is an odd behaviour, but I just can’t think of a scenario where you would use width: 100vw rather that width: 100%.
@RyanReese has already given his view on the usefulness of vw:

They are a nice idea, but in practice…

Very simple explanation.

It’s set to 100vw width. That means the viewport + scrollbars (basically).

Now, since you set min-height:200vw, that induces a vertical scrollbar. That REDUCES the available width for content.

Now, however, you set width:100vw and that is going to be (in this case) 100% wide (viewport wide) + the vertical scrollbar width. That’s too wide. That induces the HORIZONTAL scrollbar.

So basically, your vertical scrollbar is causing your horizontal scrollbar. Not at all weird. In this case, since the div{} is the direct child of html / body, you should just be using percents. Although perhaps this is just testing on your part :wink: .

The viewport includes the scrollbars though. That’s not poor implementation.

Well the short answer is because that’s how its defined in the specs :smile: If the root element’s overflow value is auto (its default) then vw includes the scrolbar in the width when it appears.

The long answer is that it was discussed in detail here (just follow with next thread to see more) and it seems to have been argued back and forth whether or not to include the scrollbars in the width.

It seems the outcome was for vw to include the scrollbar width as authors could specify overflow-y:scroll on html if they were expecting 100% widths to be involved and then the horizontal scrollbar would not be triggered when 100vw was in play.

A poor choice overall I think for most use cases though.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.