Why does the html enlarge the width on the right when the body overflows the bottom of the page?

I try to make a diagonal over a section between 2 texts in HTML/CSS. I did a div with border for that. But I don't understand why the width of the html page enlarges when the body overflows the page bottom. May you please help me to fix it ? I would like the diagonal get the width of the body only. Thanks

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

html {
  background-color: green;
}

body {
  background-color: red;
}

body .diagonal {
  border-top: 10vw solid blue;
  border-right: 100vw solid purple;
}

<html>
<body>
    SECTION 1 
    <div class="diagonal"></div>
    Why does the html enlarge the width on the right when the body overflows the bottom of the page? Thanks
    <br>text
    <br>text
    <br>Try by adding some text line and scrool left
    <br>text
    <br>text
    <br>text
    <br>text
    <br>text
    <br>text
    <br>text
</body>"
</html>

https://jsfiddle.net/kb70zc8v/

Solution

It's because you've set the border-right width as 100vw. Bizzarely the viewport width isn't, er, the viewport width when it's got a scollbar. Some info here with some suggested solutions.