Overflow bei zu langem Text

[dedlfix]

Tach!

Ich habe ein Layout, das bei kurzen Texten gut aussieht. Aber auch da sieht man schon, wenn man das Browserfenster schmaler zieht, dass der variable Teil - ohne width- oder min-width-Vorgaben - irgendwann nicht mehr weiter schrumpft, sondern der horizontale Scrollbalken erscheint, und mit ihm auch der vertikale.

• kleine Texte
• mittlere Länge
• lange Texte

Der linke Spalte mit dem aside ist mit definierter Breite versehen feststehend. Die Problemkinder sind die Nodes in den 4 Lanes. Die sollen die restliche Breite zu gleichen Teilen nutzen. Die Texte in den Nodes sollen einzeilig bleiben und abgeschnitten werden, wenn sie zu lang sind. Aber warum weigern sie sich ab einer bestimmten Länge? Was ist das Problem, das sich mir nicht erschließt?

dedlfix.

[klawischnigg]

Hi there,

Aber warum weigern sie sich ab einer bestimmten Länge? Was ist das Problem, das sich mir nicht erschließt?

Weil Du der Klasse h-100 keine "width:100%" verpasst...

[dedlfix]

Tach!

Aber warum weigern sie sich ab einer bestimmten Länge? Was ist das Problem, das sich mir nicht erschließt?

Weil Du der Klasse h-100 keine "width:100%" verpasst...

Eine Höhe von 100% haben eine Menge Elemente. All denen eine Breite von 100% zu verpassen, ist sicher nicht die Lösung - und zeigt auch keine Besserung. Oder meintest du nur ein bestimmtes Element?

dedlfix.

[klawischnigg]

Tach!

Aber warum weigern sie sich ab einer bestimmten Länge? Was ist das Problem, das sich mir nicht erschließt?

Weil Du der Klasse h-100 keine "width:100%" verpasst...

Eine Höhe von 100% haben eine Menge Elemente. All denen eine Breite von 100% zu verpassen, ist sicher nicht die Lösung - und zeigt auch keine Besserung. Oder meintest du nur ein bestimmtes Element?

Ja, das div mit der id "diagram-area", das kann man sicher auch anders lösen als über die oben genannte Klasse. Ich hab das nur schnell im Browser probiert ohne zu schauen, welche Elemente sonst noch diese Klasse haben. Egal, nur besagtes div zu stylen tut's auch...

[dedlfix]

Tach!

Ja, das div mit der id "diagram-area", das kann man sicher auch anders lösen als über die oben genannte Klasse. Ich hab das nur schnell im Browser probiert ohne zu schauen, welche Elemente sonst noch diese Klasse haben. Egal, nur besagtes div zu stylen tut's auch...

Nicht bei mir. Es ändert sich zwar etwas, aber nicht wesentlich. Es schrumpft weiterhin nicht bis 0, sondern hört irgendwann auf.

Jetzt hab ich mal ein Grid probiert und

.lanes {
    display: flex;
}
.lane {
    flex: 1 1 100%;
}

zu

.lanes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

geändert. Das schrumpft wunschgemäß bis auf 0, beziehungsweise bis die anderen Elemente im #diagram-area-Container oder Margins/Paddings streiken. Das hätte ich schon früher probieren sollen. Aber warum die Flexbox nicht will ... da hab ich wohl noch Wissenspotential.

dedlfix.

[Rolf B]

Hallo dedlfix,

ich konnte es mit overflow:hidden für das .lanes Element fixen. overflow:auto tut's auch.

Ohne diese Eigenschaft besteht "overflow:visible" als Default und da will er Dir offenbar was Gutes tun und gibt den Lanes eine interne Mindestbreite.

Es liegt wohl nicht am Block Formatting Context, der von overflow:hidden oder overflow:auto erzeugt wird. Den bekommt man auch mit anderen CSS Eigenschaften, und die helfen nicht.

Rolf

[dedlfix]

Tach!

ich konnte es mit overflow:hidden für das .lanes Element fixen.

Ist (in dem Fall?) hidden nicht eine etwas irreführende Bezeichnung? Der Overflow wird ja nicht versteckt, sondern der Inhalt wird eingeschränkt auf die Box des Elternelements, so dass der innerhalb der Grenzen gerendet wird, solange das möglich ist. Erst dann wird er versteckt. Ich hatte die ganze Zeit etwas gesucht, dass "beschränke dich auf den Platz, den ich dir gebe" entspricht, und "hidden" war mir da nicht in den Sinn gekommen.

Hab grad noch einen Artikel zu flex-grow gelesen. Damit verteilt man nicht den Platz an sich, sondern nur den restlichen Platz, der nach dem Rendern der Inhalte noch übrig ist. Kein Wunder, dass das dann nicht an Grenzen halt macht, oder eigenartige Ergebnisse liefert. Grid ist da wohl der bessere Weg, um Platz gleichmäßig zu verteilen.

dedlfix.

[Rolf B]

Hallo dedlfix,

für gleichmäßige Verteilung nimm Grid, ja, oder flex-grow:1 zusammen mit flex-basis:1px. (Zusammengefasst als flex: 1 0 1px;). Der Default von flex-basis ist meines Wissens auto und dann orientiert er sich am Inhalt.

Der Default für overflow ist visible, und offenbar versucht er dann, Sichtbarkeiten zu garantieren. Bzw. hält es nicht für nötig, die Spalten so schmal zu machen, dass Inhalte verloren gehen. Mit overflow:hidden sagst Du ihm: Es ist okay, dass was verborgen wird, und dann setzt er so skrupellos die Axt an, wie Du es von ihm erwartest.

Rolf

[Auge]

Hallo

ich konnte es mit overflow:hidden für das .lanes Element fixen.

Ist (in dem Fall?) hidden nicht eine etwas irreführende Bezeichnung?

Wenn man die Angabe mit dem selben Wert in anderen Eigenschaften vergleicht, dann ja. Bei visibility heißt hidden den Containerinhalt gänzlich zu verbergen – und das ist wohl, was du erwartest –, bei overflow heißt hidden hingegen, dass nur das, was nicht in den sichtbaren Bereich passt, verborgen wird.

Der Overflow wird ja nicht versteckt, sondern der Inhalt wird eingeschränkt auf die Box des Elternelements, so dass der innerhalb der Grenzen gerendet wird, solange das möglich ist. Erst dann wird er versteckt.

Eben.

Tschö, Auge

[klawischnigg]

Hi there,

Ja, das div mit der id "diagram-area", das kann man sicher auch anders lösen als über die oben genannte Klasse. Ich hab das nur schnell im Browser probiert ohne zu schauen, welche Elemente sonst noch diese Klasse haben. Egal, nur besagtes div zu stylen tut's auch...

Nicht bei mir. Es ändert sich zwar etwas, aber nicht wesentlich. Es schrumpft weiterhin nicht bis 0, sondern hört irgendwann auf.

Ja, sorry, weiß schon warum. Der Chrome, mit dem ich probiert habe, ist Version 54 - der unterstützt display:grid aber erst aber 56...😉 Da können bei gleichen Voraussetzungen dann schon recht schnell unterschiedliche Ergebnisse herauskommen...