Problem mit flex-box und margin

[Regina Schlauklug]

Wenn ich in meinem Chrome bei diesem Beispiel ganz nach rechts scrolle, ist kein Abstand zwischen der letzten orangen box und dem browserrand, obwohl das Element ein margin von 10px hat. Warum?

Dem ul ein padding von 10px zu geben sorgt immer noch für keinen Abstand zwischen oranger box und browserrand.

[MrMurphy1]

Hallo

Das Problem ist nicht Flexbox sondern das min-width: 30%. Das ist sachlich Unsinn. 5 mal 30% = 150% in einem Container mit 100% Breite. Was soll dass?

Gruss

MrMurphy

[Regina Schlauklug]

Das habe ich dazu gemacht, damit die Breite der Elemente größer als die zur Verfügung stehende, und somit ein Scrollbar erscheint.
Ohne Scrollbar ist das Problem schlecht nachzuvollziehen.

Das soll ein minimalistisches Beispiel sein. Es macht übrigens auch keinen Sinn, da die Text "one" bis "five" drin stehen zu haben. Das sind nur Platzhaltertexte.

Ist ein Beispiel, das nicht auf das wesentliche reduziert ist, zu bevorzugen? Ich kann da gerne noch alles Mögliche drum rum basteln.

[MrMurphy1]

Hallo

Den Inhalt von Containern über 100% wachsen zu lassen ist technisch und sachlich schlicht falsch. Entsprechend den HTML-/CSS-Regeln ignorieren dann alle Browser Abstände ganz rechts.

Warum willst du überhaupt einen unteren Scrollbalken? Damit werden nur Besucher abgeschreckt.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Entsprechend den HTML-/CSS-Regeln ignorieren dann alle Browser Abstände ganz rechts.

Genau um die CSS-Regeln^[1] geht es hier. Hast du sie parat?

LLAP 🖖

---

1. HTML hat damit wohl nichts zu tun. ↩︎

[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

[Gunnar Bittersmann]

@@Regina Schlauklug

Wenn ich in meinem Chrome bei diesem Beispiel ganz nach rechts scrolle, ist kein Abstand zwischen der letzten orangen box und dem browserrand, obwohl das Element ein margin von 10px hat. Warum?

Browser scheinen sich so zu verhalten, dass sie nur so weit nach rechts scrollen, wie es der Inhalt erfordert …

Dem ul ein padding von 10px zu geben sorgt immer noch für keinen Abstand zwischen oranger box und browserrand.

… nicht padding, auch nicht border.

Was geht: Inhalt einfügen: ul::after { content: '\a0'; width: 10px }. NBSP U+00A0 tut es; einfaches Leerzeichen U+0020 nicht.

LLAP 🖖

[Regina Schlauklug]

Ich habe es nicht geschafft, dass das Pseudo-Element dann auch wirklich 10px breit ist.

Meine Loesung ist jetzt anstelle von margin border zu verwenden.

Ich finde es uebrigens merkwuerdig dass hier jeder Scrollbalken in Frage zu stellen scheint. Ich glaube es gibt nur relativ wenige Websites die keine haben. Sich dafuer rechtfertigen zu muessen bringt mich in rage.

Auch fuer horizontale Scrollbars gibt es Anwendungsfaelle.

[Matthias Apsel]

Hallo Regina Schlauklug,

Ich finde es uebrigens merkwuerdig dass hier jeder Scrollbalken in Frage zu stellen scheint.

Nur die horizontalen.

Ich glaube es gibt nur relativ wenige Websites die keine haben.

Jede Website hat auch horizontale Scrollbalken, wenn man das Browserfenster nur klein genug macht, aber darum geht es nicht. Horizontales Scrollen ist bäh und meistens vermeidbar.

Sich dafuer rechtfertigen zu muessen bringt mich in rage.

Du musst dich nicht rechtfertigen.

Auch fuer horizontale Scrollbars gibt es Anwendungsfaelle.

Klar, dieses Forum zum Beispiel.

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Klar, dieses Forum zum Beispiel.

Ernsthaft? Das lässt du dir vorschreiben?

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

Ernsthaft? Das lässt du dir vorschreiben?

Wenn man die Struktur durch Einrückungen sichtbar machen möchte, wird die Seite irgendwann breiter als der Bildschirm.

Bis demnächst
Matthias