Mobiles Menü über die gesamte Bildschirmhöhe strecken

  • Hallo,

    ich habe eine Menüleiste, die bei kleineren Bildschirmgrößen umbricht und zu einem typischen Mobile Menu wird.

    Das sieht auch alles schick aus, aber als letzter Baustein soll sich das geöffnete mobile Menü über die ganze Seite strecken. Dazu bekommen die einzelnen Link Container Flex 1 damit sie sich ihre benötigte Höhe selbst aufteilen.


    Laut Google liegt die Lösung wohl bei einer Flexbox mit FlexDirection Column aber in der aktuellen CSS Struktur habe ich Schwierigkeiten, diese vertikale Flexbox noch unterzubringen.


    Hier mal die Spielwiese mit Dummy Code


    https://jsfiddle.net/yn2cg8b0/36/


    Wäre super, wenn sich jemand mit CSS auskennt und mir helfen kann, das aktuelle Menü nicht kaputt zu machen und die Höhe der Link Container gleichmäßig auf die Bildschirmhöhe zu verteilen.


    Hier habe ich ein passendes Beispiel für ein Menü bei einem mobilen kleinen Bildschirm


    https://www.thenativeweb.io/