I know, this has been asked 1000 times but NO solution from stackoverflow seem to work for me.

Everyone does stuff like .container { height: 100vh; } while the whole idea is to have footer at the bottom if main content of the page has not enough content to stretch.

Parent has flex as display and column direction. Children have flex-grow: 1 and flex-shrink: 0 respectively. Why does it not work? Why is footer not at the very bottom? What am I missing? I don't know height or footer or main, I want the main to take up all the free space at all times.

JSFiddle version:

CodePudding user response：

It's fundamentally the way flexbox works. display:flex dictates how its children behave, not the parent element. That element just behaves like a normal div. Thus the parent will try to extend to 100% of the width of the parent container and shrink to the height of the content so you have to set the height (or preferably min-height) to 100%.

To understand more how it works, you can set the body element to display:flex and that will cause its child element (the container) to then stretch like you'd expect, which would be an alterntative to setting the container height to 100%.

Hope this helps.