Make scrollbar to be fixed instead of crushing layout

Question

When using layout like this:

div {
  width: 25vw;
  height: 150vh;
  float: left;
  background: rgb(30,120,210)
}
div:nth-child(2n+2) {
  background: rgb(210,120,30)
}

<div></div>
<div></div>
<div></div>
<div></div>

Scrollbar crushes design. Without scrollbar it works just fine, each element takes 1/4 of the screen width. Well one solution would be to add width: calc(25vw - 17px) to last element but my grid is way more complicated than that. So I was thinking if it's possible to make slider have rule similar to position: fixed so it goes above elements rather than crushing them. Or even better, if possible, to remove scrollbar. This problem doesn't appear on Linux Firefox or Chrome.

Answer 1

Why not just use width: 25% instead of width: 25vw? Then the scrollbar will be taken into account.

Working example:

div {
  width: 25%;
  height: 150vh;
  float: left;
  background: rgb(30,120,210)
}
div:nth-child(2n+2) {
  background: rgb(210,120,30)
}

<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

If you use flexbox it can be simply solved by flex and min-width properties:

body {
  display: flex;
  flex-flow: row wrap;
}

div {
  flex: 1;
  height: 150vh;
  background: #123;
  min-width: 25%;
  max-width: 25%;
}

div:nth-child(odd) {
  background: #222;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

So, max-width can be used for any new element in the row to follow the rule.

PS: for cross-browser testing, don't forget to prefix flex properties.