Using 100vw and vh creates extra space beyond viewport size. How do I get rid of it?

Question

Trying to make full screen frames using 100 vw and 100vh on divs. I have 2 in this JSfiddle and as you can see there's extra space both on the bottom and on the right of each frame.

Is there a way of using vw and vh and having it fit perfectly without the extra space?

The css looks like this:

.f1 {
    width: 100vw;
    height: 100vh;
    background-color: blue;
}

.f2 {
    width: 100vw;
    height: 100vh;
    background-color: grey;
}

*Edit: It seems that making the width 100% solves this, but is this solution appropriate? Does it break anything?

Answer 1

Scrollbars are included in the vw and vh so the scroll will be added to allow you to see beyond viewport.

to solve this problem you can use

max-width :100%