Why 100vw causes horizontal scrollbar

Do you ever wonder why sometimes your site just has a horizontal scrollbar appears out of nowhere? Today I just ran into it again and I somehow figured out how to remove it. So here is the step I took to debug and fix it.

* {
  border: 1px solid red;
var docWidth = document.documentElement.offsetWidth;

[].forEach.call(document.querySelectorAll('*'), function (el) {
  if (el.offsetWidth > docWidth) {

So, back to the title, why would 100vw be the cause? Well, the answer is:

When you set an element's width to 100vw, the element's width now will be the whole view width of the browser and the important part is 100vw does not include the vertical scrollbar's width into its calculation at all. Therefore, when there is a vertical scrollbar, the total width will be the sum of element's width and vertical scrollbar's width, which causes the horizontal scrollbar.