Why does `min-height` on the root capture overflow, but `height` does not?

Issue

So I recently encountered this scenario where I wanted to create a gradient for a background that would start out as one color, and then extend a different color to the bottom the page. I had initially written some CSS that looks like this:

html {
    height: 100%;
}

body {
    background-image: linear-gradient(to bottom,
        red 50%,
        blue 50%
    );
}

This worked at first, until I had content that overflowed the page, and then the gradient repeated itself. I eventually found a solution in changing height to min-height on the root element, and I had the explanation for why height doesn't work, percentages are based on the containing block, and for the root element that is the "initial containing block" which in this case is the viewport.

What I have not found however, is an answer as to why min-height: 100% on the root element accounts for the overflow, and that's what I would like answered.

using height

html {
  height: 100%;
}

body {
  background-image: linear-gradient(to bottom, 
            red 50%, 
            blue 50%
        );
}

#exact-viewport-height {
  height: 101vh;
  opacity: 0.5;
  background-color: black;
}

<div id="exact-viewport-height">
</div>

using min-height

html {
  min-height: 100%;
}

body {
  background-image: linear-gradient(to bottom, 
            red 50%, 
            blue 50%
        );
}

#exact-viewport-height {
  height: 101vh;
  opacity: 0.5;
  background-color: black;
}

<div id="exact-viewport-height">
</div>

Solution

@TemaniAfif pointed out overflow-propagation to answer your question in the comment. To answer your post, the reason you are seeing the different with and without height:100% on html is because of background propagation. (min-height is not the main reason causing the difference here.)

For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

In both cases the background properties specified on body are actually propagated to html. In the first example, html has the height of 100vh, so the size of the linear-gradient is 100vh, causing the background to repeat when the contents of the body is over 100vh.

In the second example the height of html is not specified (only specifying min-height still leaves height unspecified), so the height of html is height:auto that depends on its contents' height (102vh + default margins), which is the reason the background-image is not repeating.

Answered By - SyndRain