Flexbox-Höhe beinflussen

[delbor]

Hi zusammen

Nachdem ich schon mal einen Thread zu Flexboxen eröffnet hatte, mache ich jetzt mal hier weiter, da es jetzt speziell um die Höhe von Flexboxen geht. Zurzeit arbeite ich an einer Vorlage für Fotoseiten. Die hat grundsätzlich den selben Aufbau wie die oben verlinkte Hauptseite, mit dem Unterschied, dass der Header eine wesentlich kleinere Höhe erhalten soll. Dabei befindet sich das Logo entsprechend verkleinert und ohne Willkommenstext in der linken Seite des Headers, während dessen restlicher Platz eine noch nicht realisierte horizontale Navigation aufnehmen soll. Auf Codepen befindet sich eine Version 2 der entsprechenden Seite. Beiden Versionen hab ich ein zusätzliches Main-Element verpasst, optisch am roten Rahmen erkennbar. Während in Version1 das Mainelement unmittelbar vom Body umschlossen wird, befindet sich in Version 2 (auf Codepen) zwischen den zwei einleitenden Tags des Body- und des Mainelements der Header.

Damit wollte ich ereichen, dass ich für das Body-Element mit "Flex-direction: column" die Hauptachse in Vertikale Richtung ändern konnte, während der Header, das Main- und das Footer-Element intern weiterhin auf "Flex-direction: row" gesetzt sein sollten. Meine Überlegung war, dass ich Die Elemente "Header" und "Footer" durch Zuweisung eines kleinen Wertes für Flex-grow in der Höhe beeinflussen könnte. Nur hat das irgendwie nicht geklappt. Die beiden genannten Elemente haben einen Flex-grow-Wert von 1. Dem Mainelement versuchte ich verschiedene höhere Werte zuzuweisen. Flexgrow 4 brachte gar nichts. Erst ein deutlich höherer Wert (ab 20) wirkte sich auf den Header aus, aber immer noch sehr unbefredigend. Also erhöhte ich den Wert weiter - mit dem Erolg, dass sich die Höhe des Headers zwar weiter verkleinerte, aber immer weniger, je höher ich den Flex-Grow-Wert des Mainelements setzte. Schliesslich brach ich die Übung beiFlexgrow: 150 ab... In der auf Codepen gezeigten Version hatder Header eie explizite Höhe, aber die anderen Elemnte rutschen nicht nach... Meine Frage ist: wie kann ich die Höhe eine r Flexbox beinflussen, ohne ihr explizit eine solche zuzuweisen?

Gruss Delbor