Hey guys!
I am trying to do the simplest of things: Create a < main > that fills exactly the space between my < header > and < footer >. Inside this < main >, there is a < div > that should fill the < main > tag completely, leaving just a fixed 5px margin on all 4 sides.
Unfortunately, Flexbox is super confusing and full of pitfalls - making this truly painful.
Can anybody give me a hint on how to do this?
Thanks a lot!
This isn’t really Meteor specific and I’m sure there are better mediums that are more specific to you question for which to ask this upon. That being said I’m gonna answer it any way…
First set the flex-direction of the of the element which contains your header, main and footer elements to column. Do the same for your main element and also set it’s flex property to be 1. Now also set the flex property of your div tag to be 1 and adjust your margins as necessary.