Dafür geht einer Box eine feste Höhe vorzugeben so gut wie nie. Du kannst kaum sicher sein, wieviel Höhe der Inhalt bei jedem Nutzer wirklich benötigt.
In meinem Fall werden nur der header und footer mit einer fixen Höhe festgelegt. Das geschieht eigentlich nur aus gesammt-kosmetischen Gründen. Der Inhalt ändert sich bei Beiden ja nie. Ist eine Mindesthöhe dann erforderlich? Ich könnte zwar die Höhe heraus nehmen und genügend Padding-top und padding-bottom setzen. Dann würden auch der header und footer flexibel und die Überschrift vertikal zentriert bleiben. Link
Was du tun kannst ist, einer Box eine Mindesthöhe (
min-height
) zu geben, sie also bei Bedarf größer werden zu lassen.
Der Mittelteil "#zentrum" (Navigator und Text) bleiben flexibel; in diesem Fall bestimmt der Navigator die Höhe. Ich habe aber schon überlegt wie die gesamte Seite ausgefüllt bleibt wenn ich die Navigatorliste verändere? Verwende ich also Garten und Rezepte als link ohne Liste schrumpft alles zusammen und auf größeren Monitoren schaut das etwas verloren aus. Beide links als aufklappbar zu machen ist auch nicht klar. Ich könnte dafür zwar "min-widht" setzen damit der Listentext nicht über den items-Rand läuft, aber die Höhe ist damit nicht gelöst. Welche Probleme ergeben sich für mobile Monitore bei "min-height" wenn sie kleiner kleiner als die Mindesthöhe sind? In meinem Fall müßte das bei "zentrum" gesetzt werden? Wenn ich das Browserfenster verändere tut sich überhaupt nichts. Ganz gleich wieviel Prozente ich eingebe. Keinen Effekt bei "#zentrum"zeigt dabei auch "flex-wrap: row wrap;".
LG Franz