Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Create flexbox menu that takes up rest of vertical space of browser window Reply To: Create flexbox menu that takes up rest of vertical space of browser window

#235812
Valentin Born
Participant

Nicely done, Gary! If this is exactly what you want, cool – but in vertically challenged viewports, it might look less then ideal …
So I forked Gary’s pen and added a min-height for the wrapper and also made it display: flex as a column – mo’ flex, mo’ better ;) Then, set flex-grow to 8 and 2 for .header and .navigation, respectively (instead of the vhs):
http://codepen.io/valentinborn/pen/JGYKBK
This vertical scrolling in (vertically) smaller viewports was also a feature of your original pen (which I was now able to see on codepen directly).