Apply same height of Parent and Child (CSS4Dummies)

[jpdekroon]

Hi, I’m facing a problem and I kindly request for help.
It’s presumably a very basic problem; I just want the div.content to have the same height as the div.container (in this case “min-height: 100vh”).

Could someone please have a look?
https://jsfiddle.net/tsdqfy9r/

[Beverleyh]

Google is your friend – search this phrase “flex child fill remaining height” and the answer comes up many times in the first page.

And here’s the CSS Tricks guide on flexbox for you to read up on https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hint: the “children” section and “flex-grow” will be most useful to you.

[JeroenR]

Yes, that is correct. To be quick, your div.content is a flex item, but it doesn’t grow automatically because default is not to grow. So just put for example flex-grow: 1 in your style for div.content and it will grow.

[Author]

Posts