Probleme mit Flexbox

[marctrix]

Hej beatovich,

hallo

Was übersehe ich hier?

ul {width: 100%;}

Fast: der Wert für die Listenbreite ist ohnehin schon auto, also so breit wie das Elternelement abzüglich margin, border und so einen Kram. Das auf 100% zu ändern führt nur zu Problemen — es sei denn man hat sinnvolle allgemeine Regeln in seinem CSS, wie

*, *::before, *::after {
  box-size: border-box;
}

Ist aber gar nicht nötig, denn das ist wie gesagt eh schon Standard bei Block-Elementen wie ul oder nav.

ul ist also bereits so breit wie sein Elternelement erlaubt.

Das Elternelement ist nav. Und das ist bereits schmal. Wie kommt es, wenn navdoch ein Block-Element ist?

Das liegt daran, dass header ein display: flex mitgegeben wurde (unnötigerweise, jedenfalls so weit das bisherige Layout solche Schlüsse zulässt).

Dadurch wird nav implizit zu einem flex-item.

Es muss also lediglich darauf verzichtet werden, aus header eine Flexbox zu machen.

Marc