min-height: 100vh set on body not working after HTML generated with JavaScript

I have these set.

body {    background-color: #fff;    margin: 0;    min-height: 100vh;  }    html {    background: red;  }  

In my app data is fetched from an API and a ul is generated. Before the data is fetched and the ul is created in the DOM with JavaScript, the red background of the HTML is not visible, but afterwards, it appears at the bottom:

I figured out a way to remove the extra HTML space at the bottom - adding either overflow-x: hidden or overflow-y: hidden to both the body and html. I'm not sure why this works, but more importantly, why didn't min-height: 100vh seem to take effect for body anymore once the ul was added?

https://stackoverflow.com/questions/65768320/min-height-100vh-set-on-body-not-working-after-html-generated-with-javascript January 18, 2021 at 11:07AM