JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

* {
  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;
}