Problem mit flex-box und margin

[Rolf B]

Hallo Regina,

du könntest mal das A-Problem statt das B-Problem schildern. Was willst Du erreichen? Vielleicht gibt's eine bessere Basis-Alternative.

Grundproblem ist hier, dass das ul ein Block-Element ist und deshalb seine Breite nicht über die Breite des Containers hinaus automatisch anpasst (wenn Du ihm denn die Chance gelassen hättest, width:100% verhindert das). Der Scrollbar erscheint, weil die List-Items rechts aus dem ul hinausragen. Gib dem ul eine Hintergrundfarbe, dann siehst Du das.

Dein minimalistisches Problem könnte man mit min-width in em statt % sowie einem display:inline-flex auf dem ul lösen. Oder durch display:flex und width:150% auf dem ul sowie flex:1 0 auf den li. Ob diese Lösungen für dein eigentliches Problem zielführend sind, können wir schlecht sagen. Ein Scrollbar auf Ebene des body mag nicht die beste Idee sein. Es könnte besser sein, die Liste in einen Container einzuhüllen und dem overflow-x:scroll zu geben.

Wenn Du denn unbedingt scrollen willst. Vielleicht gibt's auch da bessere Lösungen. Wenn wir denn dein eigentliches Problem hätten.

Rolf