0

I have a header with a height set but it's ignored and it shrinks down to whatever the content height is. (see Sample 1)

I know that happens because the parent container (the body in the examples) has display: flex and flex-grow: column. But I need that because in other scenarios I want one of the children to flex-grow: 1 and fill all remaining height of the viewport. (see Sample 2)

Also, that only happens if the page is taller than the viewport (in other words, if the parent container with display: flex and flex-grow: column has a vertical scrollbar).

Sample 1 | Sample 2

Why does that happen?

It can be fixed if I use min-height instead...but why is the height ignored?

Another thing: on the work I'm doing (not in the examples) some absolute positioned elements get mispositioned if the parent is display: flex and flex-grow: column so that raises me another question: is it a good practice to have your whole application wrapped by a parent with display: flex and flex-grow: column?

TylerH
  • 20,799
  • 66
  • 75
  • 101
zok
  • 6,065
  • 10
  • 43
  • 65

0 Answers0