Dreispaltiges Layout mit Flexbox und zwei Media Queries

[Rolf B]

Hallo Bimmelbeule,

das ist mit einer gemeinsamen Kraftanstrengung von flex-wrap, width, calc und margin-left machbar, WENN die leere Zelle unter "nav" wirklich leer sein soll.

Wenn Du aber sowas haben willst (muss ich jetzt als ASCII Art zeichnen, keine Ahnung ob und wie sich sowas downmarken lässt)

+-------+---------------+
|       |               |
| NAV   |  INHALT       |
|       |               |
|       +---------------+
|       |  ASIDE        |
+-------+---------------+

dann brauchst Du zwei Flexboxen. Oder Grid.

Wenn das nav tatsächlich nicht höher werden muss als der Inhalt, dann geht es so: https://jsfiddle.net/Rolf_b/cfrbyq94/3/. Es ist aber schon Gefummel.

Mit Grid dagegen sähe es so aus:

https://jsfiddle.net/Rolf_b/roLh0snk/

Die Navigation geht vertikal bis zum footer. Wenn Du das nicht willst, ändere das Grid-Template ab. Da steht das "nav" in zwei Zeilen; ersetze das untere durch einen anderen Namen (wenn Du Inhalt für diese Zelle hast) oder einfach durch ein "-".

Rolf