Flexbox: Difference min-height vs. height on flex element?

Question

I would like a flex-element with a min-height of 100%. There is a child element always at the bottom. If the content in the first flex child is longer than the screen the site should be normal scrollable.

Here is a pen I made.

Why is it working with height but not min-height?

height: 100%; // works

min-height: 100%; // doesn't works

This question should be edited and references to Flexbox should be removed, since it has nothing to do with Flexbox — Kostas Siabanis, Sep 10 '17 at 19:32

score 1 · Answer 1 · answered Sep 08 '17 at 13:16

As answered here: CSS Height working but min-height doesn't work

Height can be inherited from positioned parents but not when these have a min-height property.

Which means that .flexbox doesn't inherit height from wrapper because .wrapper has min-height set. When you set height to .wrapper, .flebox and with it .grower can figure out what 100% actually means, and then they grow to fit the screen.

Note: I would say position part of the linked answer is not correct, but the quoted part is.

score 0 · Answer 2 · answered Sep 08 '17 at 13:11

min-height : Height of the element or css class in question should not be less than specified value, even if height is less that specified value of min-height. It does not specify what the height is going to be, it specifies that it cannot be smaller than its value.

So, if height is 200px, max-height is 230px, min-height is 250px, height of the page component will be 250px. Between height and max-height, max-height can override height.

So, if I change your wrapper class to as shown below, it's height will remain 80%.

.wrapper {
  background-color: pink;
  min-height: 80%;
  height:50px;
}

Flexbox: Difference min-height vs. height on flex element?

2 Answers2