Flexbox Problem im IE11: Elemente mit äußerst geringer Breite übereinander gestapelt statt nebeneinander (Firefox & Chrome funktionieren)

[Rolf B]

Hallo Johannes,

ich habe mir deine Seite mal angeschaut.

Zuerst: Wenn man im CSS irgendwass speziell für den IE machen will, muss das mit -ms- beginnen. -webkit- ist Android, Chrome und Safari. Und für die brauchst Du kein Präfix mehr. Der IE10 unterstützt Flexbox mit -ms- Präfix, der IE11 braucht kein Präfix mehr. Die Probleme des IE sind darin begründet, dass die Flexbox-Implementierung massiv fehlerhaft ist. Es kann durchaus sinnvoll sein, für den IE11 die Basis-Darstellung (mit sinnvoller Maximalbreite von z.B. 50em) zu setzen, die Du sonst nur für schmale Viewports wählst, statt sich mit den Flexbugs herumzuschlagen.

Es gibt gelegentlich auch Pixellöcher, d.h. bei einer Breite unter 50em hast Du eine Darstellung 1, bei genau 50em die Darstellung 2 und bei über 50em die Darstellung 3. Das passiert in Chrome genauso wie im IE. Aufgefallen ist mir das beim padding-left:2em für #content, das Du an max-width gebunden hast. Verwende entweder nur min- oder nur max-, aber nicht beides. Man muss dafür ggf. die Regeln etwas umsortieren und umformulieren, aber es müsste eigentlich immer machbar sein.

Was im IE schlecht funktioniert, ist eine Basisbreite von 0. Die solltest Du auf einen sinnvollen Wert setzen, z.B. 8em, und flex-shrink auf 0 lassen. Flex-Shrink (den zweite Parameter der flex-Eigenschaft) braucht man vor allem, wenn die Breite nicht ausreicht und der Browser die Flex-Elemente automatisch schmaler machen soll. Der erste Parameter der flex-Eigenschaft ist flex-grow, damit erlaubst Du zum einen das automatische Verbreitern und zum anderen gibt das Verhältnis der flex-grow Werte an, welches Flex-Element wie stark verbreitert wird. Aber das bewirkst Du ja schon mit deinen Media-Queries. Also flex: 1 0 10em für die asides. Das sollte auch für andere Browser gut sein.

Abgesehen davon hat die Seite auch in Chrome ihre Quirks.

Im Breitenbereich 951-960px ist der Newsletter-aside oben rechts und viel zu breit. Irgendwo ist da ein Loch in deinen Media-Breaks, ich hab's nur noch nicht gefunden.

Im ganzen Bereich 800-950px (50em bis knapp vor 60em) ist die Newsletter-Anmeldung unten, aber überlappt sich mit dem anderen aside, das sticky ist. Du hast da zwar irgendwelche Magie mit IntersectionObserver programmiert, aber wenn die dafür gut sein soll, funktioniert sie nicht. Das ist mir jetzt zu kompliziert (heißt: das kostet mich zu viel Zeit), um es zu durchdringen.

Im Bereich knapp oberhalb von 50em ist dein Menü zu breit, es ragt dann rechts aus dem Bildschirm hinaus. Ggf. musst Du die Lücken zwischen den Menüpunkten reduzieren. Abgerundete grüne Rahmen auf einem grünen Hintergrund sehen für mich ohnehin etwas merkwürdig aus.

Rolf