1

The innermost child div has a height of 0 even though its parent does not have a height of 0.

However, if I change the css property min-height to simply height in the topmost div then the innermost div takes up the whole screen (as expected)

Why does height and min-height behave differently in the topmost div?

<body>
    <div style="
    display: flex;
    flex-direction: column;
    min-height: 100vh;">
        <div style="flex: 1">
            <div style="height: 100%;"></div>
        </div>
    </div>
</body>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Jacques Le Normand
  • 19
  • 2
  • Setting the `min-height` is not the same as setting an explicit height, therefore the child won't inherit it as it would a static height. – Tyler Roper Dec 13 '19 at 18:47
  • 1
    FYI @justDan there's no point in creating a Stack Snippet if you don't also insert some styles or content to *illustrate* the thing. Without that, having a runnable demo tells us nothing beyond looking at the code itself. – TylerH Dec 13 '19 at 18:49

0 Answers0