Why aren't the `vw`s and `vh`s scaling properly?

Question

I'm making a frame. The <div> has a width of 90vw and a height of 90vh. Why isn't the div scaling properly when I resize the window?

Code:

body {
  padding: 0px;
}

#frame {
  border-top: 8px solid orange;
  border-left: 16px solid orange;
  border-bottom: 8px solid orange;
  border-right: 1px solid white;
  border-radius: 8px;
  width: 90vw;
  height: 90vh;
  padding: 16px;
}

<div id="frame">
  <div id="content">

  </div>
</div>

Answer 1

You should add box-sizing: border-box; for everything (*) to include the borders and the padding in the overall width and height, and use margin: 0 instead of padding: 0 for the body to reset the default margins.

* {
  box-sizing: border-box;
}
  body {
    margin: 0px;
  }
  
  #frame {
    border-top: 8px solid orange;
    border-left: 16px solid orange;
    border-bottom: 8px solid orange;
    border-right: 1px solid white;
    border-radius: 8px;
    width: 90vw;
    height: 90vh;
    padding: 16px;
  }

<div id="frame">
  <div id="content">

  </div>
</div>