Display scrollbars for overflown content only on parent container

What I am trying to achieve is to have only scrollbars on the div with overflow: auto. Why do I see additional vertical scrollbar on the body?

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html -->

<div style="overflow: auto; height: 100vh; width: 100%;">
    <div style="width: 4000px;height: 4000px;background: green;">       </div>
</div>

<!-- end snippet -->

Remove the margin and padding from the document container like this:

html, body {
  margin: 0;
  padding: 0;
}

<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-css -->

html, body {
  margin: 0;
  padding: 0;
}

<!-- language: lang-html -->

<div style="overflow: auto; height: 100vh; width: 100%;">
    <div style="width: 4000px;height: 4000px;background: green;">       </div>
</div>

<!-- end snippet -->