I’m struggling with flex! I’ve been trying to learn it but, unfortunately, I’m faced with a tight deadline (of course!) and was wondering if I could get some pointers. I have audience members (mostly desktop users) that drag their web browsers to different sizes so I need a layout that adjusts accordingly. The trick I’ve been trying to master is to have a fixed header that adjusts dynamically, a content area that one can scroll through, and a footer that stays at the bottom of that content page no matter the height of the browser window. (I don’t want a fixed footer!) Here are my 2 attempts:
https://codepen.io/bk20175/pen/eLXVwP
This one sort of works with the footer staying at the bottom of the scrollable content area. The fixed header adjusts but, at a certain point, starts covering up the content area!
https://codepen.io/bk20175/pen/BObrBZ
This one works with the fixed header adjusting dynamically and the scrollable content area pushing down in relation to the header. The footer is messed up though.
