In the development of my app, I noticed an interesting issue. When I set the background on the html with a height of 100vh and resize the viewport to cause vertical overflow, the background does not cover the overflowed content:
html {
height:100vh;
font-size:62.5%;
background:radial-gradient(at top, hsl(214, 47%, 23%), hsl(237, 49%, 15%));
background-repeat:no-repeat;
}
https://i.sstatic.net/0n5c1.jpg
However, by changing the height property to min-height:100vh, the overflowed content now has the background applied as desired. I'm curious about the reason behind this behavior:
html {
min-height:100vh;
font-size:62.5%;
background:radial-gradient(at top, hsl(214, 47%, 23%), hsl(237, 49%, 15%));
background-repeat:no-repeat;
}