Technical reason behind height: 100vh (working) vs min-height: 100vh (not working) for body?

Question

Please do not vote to close. This is about the technical reason on why this is not working. I already have a working solution and I'm not asking for it.

Simple example where I need to make .wrapper height, at least, the browser height.

The following works in IE10-11, Edge, Firefox, Chrome (working fiddle):

<!doctype html>
<html lang="it">
    <head >
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Demo</title>
        <style>
            body {
                margin: 0;
                height: 100vh;
                background-color: red;
            }

            .wrapper {
                min-height: 100%;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="wrapper"></div>
    </body>
</html>

But if I set body to min-height instead of height (which is, IMHO, reasonable), it doesn't work anymore (not working fiddle). Why? What's the technical reason behind it?

EDIT 1

Another working fiddle where body has min-height: 100vh and .wrapper has min-height: inherit.

Another working fiddle where only .wrapper has min-height: 100vh.

Not sure what you're expecting but the "not working fiddle" seems fine in Safari, Chrome, and Firefox — Stephen Thomas, Mar 20 '18 at 22:51
@StephenThomas not in my Chrome, IE, Firefox or Edge: can you see a full green background? Red is body, green is the wrapper. The wrapper should be full-height, hence you should see all green there. — gremo, Mar 20 '18 at 22:53
Possible duplicate of [Child inside parent with min-height: 100% not inheriting height](https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height) — Obsidian Age, Mar 20 '18 at 22:58
@ObsidianAge please cosinder removing your vote close. This is a request for explanation, not a solution. The question you are pointing is about a solution. — gremo, Mar 20 '18 at 23:04
^ The link in question states it's [**a bug**](https://bugs.webkit.org/show_bug.cgi?id=26559). What more explanation do you need? — Obsidian Age, Mar 20 '18 at 23:06
@ObsidianAge bug for every browser, even if not webkit? Nope. IE or Edge should work if this is a bug for only webkit based browsers... — gremo, Mar 20 '18 at 23:07

Alohci · Answer 1 · 2018-03-21T07:53:11.513

The CSS 2.2 spec says:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

So that's the rule. The reasoning behind the rule is pretty simple, and follows similar rules in CSS 2, circular dependencies must be avoided.

When the container's height is specified, it has no dependency on the height of its content, so its content height can be safely specified as a percentage of that without creating a circular dependency.

But that doesn't apply to when only the container's min-height is specified. If the content's height is greater than the min-height, then the container's height depends on the content's height, and if that's a percentage, then the content's height depends on the container's height, and you have a circular dependency. So it intentionally "doesn't work", to stop that situation arising.

score 2 · Answer 2 · answered Mar 20 '18 at 23:25

And here we go:D I think i find a issue. fiddle

.wrapper {
                min-height: 100vh;
                background-color: green;
            }

In my point of view min-height of some VH - Viewport Height can't be overlapped, with %.

vh !=%.

So only think to do it's change the wrapped min-height from % to vh.

Hope i helped.

Technical reason behind height: 100vh (working) vs min-height: 100vh (not working) for body?

2 Answers2

vh !=%.