Brauche eure Hilfe bei Nav-Menü Anpassung

Hallo liebe Forumer,

ich benötige dringend eure hilfe bei der Anpassung eines Menüs.

Hierum geht es. Also bei Opera und Chrome sieht es soweit gut aus, nur halt im Firefox und Edge gibt es Probleme.

Wenn man dort also das Bildschirmfenster ganz schmal macht wie hier:

Ich komme dort nicht weiter, es ist mir zu kompliziert und mir raucht der Kopf vom experimentieren,

Ab diesen Punkt, also @media screen and (max-width: 28.125em) {

soll dieses Menü immer schmaler werden bis eben das Browserfenster nicht mehr schmaler zu machen geht, probiert es selbst aus:

Der Bottons sollen in die nächste Zeile rutschen und mittig angeordnet sein.

Der Links sollen sich, klar, umbrechen wenn sie zu lang sind (also: Aktuelles, Arbeiten ... ) , gerade im Edge ist das nötig.

Bisher habe ich alle kombinationen von width /maxwidth 100%; & auch auto, ausprobiert aber keine Wirkung gezeigt.

Was ist da nötig?

Lieben Gruß der misanthrop

Nee, es geht darum dieser "Zustand" (auf dem jpg) ist der letzte, der noch O.K. ist, wenn man aber (im Firefox) noch weiter zusammenschiebt bis es nicht mehr geht, soll dieser Übergang noch flüssiger vonstattengehen (beim zusammenschieben). Ich habe hier max-width: 100% & auto , aber die Navi ist nicht bis zum Rand, rechts und links , da sind Abstände.

---

Es soll so sein das bei @media screen and (max-width: 28.125em) {  die Navi 100% breit ist/sich fügt und dann eben mit dem weiteren schmaler werden auch schmaler wird.

---

Darum geht es mir und ich hab vor lauter experimenten keine Idee mehr wie es gehen könnte.

Deshalb benötige ich eure Hilfe.

der misanthrop

Okay, ich werde das margin von "contentspan" mal auf 0 stzen, mal sehen was passiert.

Bis später. DANK!

Nope, es scheint so, das es nicht am "contentspan" liegt, sondern eher an "nav#main-nav" das das eben nicht die volle Breite von 100% annimmt.

Sagt mir etwas anderes, woran liegt es, kann den Fehler echt nicht finden.

Mit der Bitte um dringende Mithilfe

der misanthrop

Moment, wo hast du was verändert?

also bei @media screen and (max-width: 28.125em) {...

  #main-nav {
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: auto;
                max-width: 100%;
                align-self: center;
            }

Dort alles was flexbox ist weg...

nav > ul ul.group,
            nav > ul ul.group > li {margin:0; padding:0; display:block;}
            nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
            nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
            nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
            nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}

Das also auch weg und was ist jetzt mit contentspan?

Die gestrichelte grüne Linie umschließt contentspan (hab ich contentspan als Rand gegeben) , rechts und links sind 0.3em Abstand zu den äußeren Rändern, die wohl nicht viel bewirken.

Denn beim minimalsten zusammenschieben des Bildschirmfenster gibt es rechts und links anständig diesen 0.3em Rand.

Daran ligt es wohl nicht, der fehler spielt sich innerhalb von contentspan ab. #main-nav dehnt sich nicht maximal bis zum contentspan aus.

Entweder gibt es ein verstecktes padding bei contentspan oder bei #main-nav stimmen die flexbox Angaben nicht.