How to Calculate the Viewport Width (Vw) Without Scrollbar

Why does vw include the scrollbar as part of the viewport?

It would be convenient if viewport units didn't include cause scrollbars but it is the display size (screen) after all. Have look at this solution with a pseudo element though:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Makes for a square in your example as well:

https://jsfiddle.net/3z887swo/4/

.box {
    float: left;
    width: 50%;
}

.box::before {
    content: "";
    display: block;
    padding-top: 100%;
}

Edit - if anyone is wondering why this works (vertical padding responding to the original element's width)... that's basically how it's defined in the specification:

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

http://www.w3.org/TR/CSS2/box.html#padding-properties

After coming across my own answer, I think it needed some refinement. Semantic ambiguity is why I replaced the word "include" with "cause" at the top. Because it's more the fact that vw units only take the viewport size into account - not including any scrollbar and causing overflow and a scrollbar in the other direction when its width is added to 100vw (making the total space that is needed the viewport plus scrollbar width, exceeding the screen).

As with the question here, the best way to handle vw units is likely to avoid them if you can because they just aren't very compatible with desktop browser (that don't have overlaying scrollbars).

I edited out the idea that included a CSS variable, however hopeful it seemed.

How to get screen width without (minus) scrollbar?

.prop("clientWidth") and .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

in JavaScript:

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{P.S: Note that to use scrollWidth reliably your element should not overflow horizontally}

jsBin demo

You could also use .innerWidth() but this will work only on the body element

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

vertical scrollbar appears when width is larger than 100vw

The viewport unit are relative to the viewport so if a horizontal scroll bar appear it means that this scroll bar will take space thus we need the vertical scroll in order to see the part hidden by the horizontal one.

To avoid this keep using only the vw unit and use % instead of vh so the height will be relative to the parent instead of the viewport. I have also removed the margin and adjusted the top and left values to make the block centred

* {  padding: 0;  margin: 0;}
body,html {  height: 100%;}
.outer {  position: relative;  top: 0;  left: 0;  height: 100%;  width: 105vw; /* This won't create a vertical scroll*/  overflow: hidden;  background-color: lightyellow;}
.bg {  height: 80%;  width: 80vw;  top: 50%;  transform: translateY(-50%);  position: absolute;}
.bg1 {  background-color: #80c9be;  left: 10vw;}
.bg2 {  background-color: #e99790;  left: 110vw;}
.bg3 {  background-color: #f2e2cd;  left: 210vw;}
.bg4 {  background-color: #48697f;  left: 310vw;}

<div class="outer">  <div class="bg bg1">  </div>  <div class="bg bg2">  </div>  <div class="bg bg3">  </div>  <div class="bg bg4">  </div></div>