Hallo Gunnar,

die einzige Flex-Anforderung im Stylesheet betrifft den Body. Und der hat nur ein Kind-Element, welches dazu noch gefloatet ist. Darin steckt dann ein div, darin ein div, darin ein div, welches die Flexbox sein soll, aber - wie Du schon sagtest - nicht ist. Da fehlt die Style-Regel zu.

Die Hypothese, dass Matroschka-Webseiten (Inhalt in div in div in div in body) besser seien, hält sich hartnäckig. Zumeist ist sie falsch.

Wo wir schon dabei sind:

Das webkit-Präfix für Flexbox ist längst nicht mehr nötig. display:flex und flex-flow:row reicht völlig (bzw. flex-flow:row ist Default und hier auch nicht nötig).

Den Inhalt eines Flex-Items zu floaten ist ebenfalls nicht sinnvoll. Ein Flex-Item bildet einen Blockformatierungskontext, der Floats einsperrt. Float ist die Technik aus der Zeit vor Flexbox, um Inhalte nebeneinander zu bekommen.

Das hier:

<!-- JavaScript Weiterleiting HTTP zu HTTPS 
<script type="text/javascript">
if (location.protocol !== "https:") {
  location.protocol = "https:";
}
</script>

ist auch so eine Sache. JavaScript läuft nicht immer. Wenn es im Kommentar steht, erst recht nicht. Diese Steuerung gehört auf den Server. Wenn sie dort gelandet ist, gehört dieses Codefragment entsorgt.

Ansonsten (ich bin zur Shiatsu Homepage gewechselt): nav ist fein, aber die Renovierung darf gerne auch auf <div id="header"> und <div id="footer"> erweitert werden.

Und die li im Menü möchten nicht gefloatet sein. Durch den float entsteht ein Blockformatierungskontext, und Überläufe werden verhindert. Dadurch gehen den Unterlängen ein paar Pixel ab. Float ist ein Spezialgewürz, nicht Salz, was man überall draufstreut.

Mit float:

Ohne float:

Und hatten wir das Thema ":target" Pseudoklasse nicht schon mal? Als Werkzeug für ein Dropdown-Menü taugt das nur bedingt. Mit einem Zeigegerät klappt das Menü schön auf und zu. Mit Tastatur muss man aber erst ein weiteres Mal <tab> drücken, bevor man von #nav-menue-zu nach #nav-menue gelangt.

Rolf