Div's width set in vw, but doesn't work properly

Question

I have a problem with CSS (or at least I think that the problem is in CSS). I set everything in vw, but it acts weirdly. In big resolution it looks normaly, but in small resolution it doesn't.

You can see it on this GIF (it was too large to upload here). As you can see, when the screen is smaller, the last div moves down under the first one.

Here is live demo: http://mc2.devicarus.eu/

var width = document.getElementById("box1").offsetWidth;
var box1 = document.getElementById('box1');
box1.style.height = width + "px";
var box2 = document.getElementById('box2');
box2.style.height = width + "px";
var box3 = document.getElementById('box3');
box3.style.height = width + "px";

div.boxes {
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 3%;
}

div.box {
  border-style: solid;
  border-color: black;
  border-width: 0.15vw;
  width: 24.7667vw;
  background: url('http://mc2.devicarus.eu/img/wood.png');
  background-size: 150px;
  display: inline-block;
  margin-left: 0.8vw;
  margin-right: 0.8vw;
  text-align: center;
}

<div class="boxes">
  <div class="box" id="box1">

  </div>
  <div class="box" id="box2">

  </div>
  <div class="box" id="box3">

  </div>
</div>

Can someone help me please?

Answer 1

Use display:table like following...

div.boxes {
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 3%;
  display:table;    /* Added */
}

div.box {
  border-style: solid;
  border-color: black;
  border-width: 0.15vw;
  width: 24.7667vw;
  background: url('http://mc2.devicarus.eu/img/wood.png');
  background-size: 150px;
  display: table-cell;  /* Added */
  margin-left: 0.8vw;
  margin-right: 0.8vw;
  text-align: center;
}

<div class="boxes">
  <div class="box" id="box1">

  </div>
  <div class="box" id="box2">

  </div>
  <div class="box" id="box3">

  </div>
</div>

Use display:flex like following...

div.boxes {
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 3%;
  display: inline-flex;  /* Added */
}

div.box {
  border-style: solid;
  border-color: black;
  border-width: 0.15vw;
  width: 24.7667vw;
  background: url('http://mc2.devicarus.eu/img/wood.png');
  background-size: 150px;
  /* display: table-cell; */
  margin-left: 0.8vw;
  margin-right: 0.8vw;
  text-align: center;
}

<div class="boxes">
  <div class="box" id="box1">

  </div>
  <div class="box" id="box2">

  </div>
  <div class="box" id="box3">

  </div>
</div>