100vw and scrollbars

[TomB]

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

[SamA74]

Why not just use 100%?

[TomB]

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

[SamA74]

@TomB

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:

Screw VW - we need units that base off parent/wrapper width!

VW units for font sizes are basically useless if you have a page that has a wrapper (e.g. max-width:1000px;) and you want to use vw units. You will never be able to fully get perfect sizes everywehre due to it basing it off the viewport width/height. Some screens will have the perfect size, otehrs will get a really small size, big screens will be out of control! I wish we had something that based its measurement off of a wrapper width. Not sure how that would work in implementation though (to g…

They are a nice idea, but in practice…

[RyanReese]

@TomB

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)

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 .

[RyanReese]

@TomB

surely 100vw should be the visible area (ie excluding the scrollbar)

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

[PaulOB]

@TomB

Why does 100vw include the scrollbar width?

Well the short answer is because that’s how its defined in the specs 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.