Rechtes Seitenmenü browserabhängig drastisch unterschiedliche Abstände

[Rolf B]

Hallo webeditor,

Die flex-Eigenschaft ist die Kombination von flex-grow, flex-shrink und flex-basis.

Du gibst 100% für flex-basis an. Da für die Flexbox eine Spaltenausrichtung angegeben ist, beeinflusst flex-basis die Höhe. 100% Höhe - was ist das? Die Höhe des Container-Elements. Bei mir ist das so in etwa die Viewport-Höhe.

Zusammen mit flex-grow:1 sollte das dazu führen, dass die Höhen der Listenelemente alle gleich groß sind und in Summe so hoch wie der Container. Da der Container aber keine Höhenbeschränkung hat, wird er einfach so lange aufgeblasen bis es passt.

Du solltest auch nochmal die Flexbox für die article/aside Verteilung überdenken. Du MÖCHTEST vermutlich, dass die Link-Leiste eine feste Breite hat, so dass die Text gerade passen. Der Artikel soll den Rest füllen. Dafür gibst Du dem Artikel flex: 1 1 auto, und dem aside flex:0 0 14em. 14em hat bei mir gepasst. Deine Idee mit flex:4 1 0% und flex:1 1 0% führt zu einer 4:1 Verteilung, das willst Du vermutlich nicht.

Rolf