Layout-Frage zu seitenfüllender Flexbox

[Rolf B]

Hallo,

ich habe eine Webseite, bei der ich Header und Nav oben, den Footer unten fixieren will. Dazwischen den Main-Bereich flexibel. Das geht mit Flexbox. Ok.

Header, Footer und Nav sollen die Fensterbreite ausfüllen. Der Main-Bereich vom Background her auch, aber die darin angezeigten Daten sollen nicht zu breit werden. Daher befindet sich darin eine section mit max-width und margin: 0 auto.

Diese Section hat wiederum einen Titel, dann eine Tabelle mit Dokumentverweisen und einen Footer.

Ich möchte:

• den Dokumente-Titel und den Dokumente-Footer ständig sichtbar haben
• die Dokumentliste bei Bedarf scrollen
• den Dokumente-Footer bündig am Ende der Dokumentliste haben. Er soll nicht am Page-Footer kleben
• eine CSS Lösung ohne JavaScript.

Und das kriege ich nicht hin. Ich habe es mit zwei geschachtelten Flexboxen gelöst, d.h. der Body ist die äußere Flexbox und die main section die innere Flexbox. Ich muss der inneren Flexbox eine fixe Höhe geben; wenn ich dort auto setze, bleibt der Body nicht auf 100vh begrenzt.

Hier ist eine abstrahierte Spielwiese dazu. Das meiste klappt, nur der Dokumente-Footer (Part 3) bleibt unten kleben. Kriegt man das hin? Kriegt man das so hin, dass es auch ein IE11 versteht?

Rolf