Element soll so breit wie nötig sein

[JürgenB]

Hallo,

Bei der problematischen Seite soll das rosa Div nur so breit sein, wie sein Inhalt, und nicht die durch max-width gesetzte Breite einnehmen. Leider gelingt mir das nicht, wenn der Text im DIV umbricht. Zum Testen kann die Größe des grauen DIVs an der rechten unteren Ecke verändert werden.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

auf dem Tablet sehe ich keinen Quelltext. Und resizable ist das graue Div für mich (Chrome auf Android) auch nicht. Ich sehe zwar irgendeinen Fliegenschiss in der unteren rechten Ecke, aber auf Finger oder Stylus reagieren tut er nicht.

Mit min-content, fit-content und max-content als Breitenangabe hast Du schon experimentiert? Ich muss aber auch zugeben, deine Problemstellung aus der Beschreibung heraus nicht wirklich zu verstehen…

Rolf

[JürgenB]

Hallo Rolf,

hier der Quelltext:

<div id="outer">
	<div id="inner1"></div>
	<div id="inner2">Hier steht Text, der umgebrochen werden soll.</div>
</div>	Quelltext hier

#outer {
	position: relative;
	width: 300px;
	height: 300px;
	background-color: lightgray;
	resize: both; overflow: auto; 
}
#inner1 {
	background-color: #f00;
	position: absolute;
	width: 50px;
	height: 30px;
	bottom: 10px;
	left: 10px;
}
#inner2 {
	background-color: #faa;
	position: absolute;
	max-width: calc(100% - 90px);
	width: fit-contend;
	bottom: 10px;
	right: 10px;		
	text-align: right;
	text-wrap: balance; 
	padding: 5px;		
}

fit-contend war einer der Versuche, die nicht zum Ziel geführt haben. Ich habe aber auch max-contend und min-contend ausprobiert.

Das rosa DIV (#inner2) soll in der Breite nur den Platz einnehmen, den der Text im DIV benötigt.

Im Einsatz liegt im äußeren DIV eine Landkarte und im rosa DIV das Copyright, das so wenig von der Karte verdecken soll, wie nötig.

Gruß
Jürgen

[Hans Baumann]

Hallo, ich versteh den Sinn, habe aber keine Lösung. Vielleicht kann Rolf ja da helfen. Wenn ich bei Deinem Beispiel das Fenster größer ziehe, dann verhält sich die Funktion erst dann richtig, wenn das rechte "inner" nicht mehr umgebrochen wird. Dann ist es "nur" die Textgröße, dazwischen kann man das "dahinter" sehen. Solange der Text aber umgebrochen wird, macht das rechte inner eben keine "Minimierung". Das Problem kann man also erst dann (leicht) sehen, wenn man das Fenster größer zieht. Eventuell hängt es damit zusammen, dass erst beim "einzeiligen" Ansehen die linke und rechte Höhe gleich sind. Alles zuvor ist die rechte Höhe viel größer (da eben Textumbruch). Vielleicht hilft ein fixieren auf unten? Aber da weiß Rolf sicher mehr. Liebe Grüße, Hans

[Matthias Scharwies]

Servus!

fit-contend war einer der Versuche, die nicht zum Ziel geführt haben. Ich habe aber auch max-contend und min-contend ausprobiert.

Meinst du content?

Schau mal hier: CSS/Tutorials/Grid/Einführung

Herzliche Grüße
Matthias Scharwies

[JürgenB]

Hallo Matthias,

Meinst du content?

ja, natürlich. Aber beim wilden Rumprobieren habe ich wahrscheinlich beides ausprobiert. Da ich aber die meisten Tests in der Entwicklungsumgebung des Browsers gemacht habe, habe ich bestimmt auch die richtige Schreibweise getestet.

Ich habe das auf der problematischen Seite mal korrigiert.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Matthias Scharwies

Meinst du content?

Ja, das meint er …

Schau mal hier: CSS/Tutorials/Grid/Einführung

… aber bei manchen deiner Antworten hab ich das Gefühl, du schreibst sie eher, um hier ein um den anderen Link ins Wiki zu platzieren.

🖖 Live long and prosper

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Meinst du content?

Ja, das meint er …

Schau mal hier: CSS/Tutorials/Grid/Einführung

… aber bei manchen deiner Antworten hab ich das Gefühl, du schreibst sie eher, um hier ein um den anderen Link ins Wiki zu platzieren.

in der Erklärung vor dem Beispiel:

Dabei soll sich die Breite des Absatzes am verfügbaren Platz, der neben der Überschrift bleibt, orientieren

Ich würd' die absolut positionierten Boxen vermeiden und so etwas wie im Beispiel versuchen:

@media (min-width: 20em) {
	section {
		display: grid;			
		grid-template-columns: min-content 1fr;
	}
}

Aber im Prinzip hast du Recht.

Herzliche Grüße
Matthias Scharwies

[JürgenB]

Hallo Matthias,

Ich würd' die absolut positionierten Boxen vermeiden ...

leider sind die nicht von mir, und ich möchte, wenn eben möglich, nichts am vorgegebenen (Leaflet-)Layout ändern.

Gruß
Jürgen

[Der Martin]

Hallo Jürgen,

ich hab bei deiner Beschreibung ein Verständnisproblem.

Bei der problematischen Seite soll das rosa Div nur so breit sein, wie sein Inhalt, und nicht die durch max-width gesetzte Breite einnehmen.

Aber wenn du Textumbruch zulässt - wie breit ist denn dann "so breit wie der Inhalt"?
Wenn's der Platz zulässt, dann ohne Umbruch? Oder 3 Zeilen à 5 Wörter?

Meines Wissens versuchen die Browser bevorzugt die erste Variante umzusetzen. Und durch die absolute Position gilt doch sowieso: "Orientiere dich am Inhalt und nicht am Elternelement."

Einen schönen Tag noch
 Martin

[JürgenB]

Hallo Martin,

die maximale Breite des inneren rosa Divs wird durch max-width und die Breite des umgebenden DIVs vorgegeben und steuert, ob der Text im inneren DIV umgebrochen wird. Die Breite des inneren DIVs soll sich nach der Breite des evtl. umgebrochenen Textes richten. Das passiert aber nur, wenn der Text nicht umgebrochen wird. Bei Umbruch ist das innere DIV dann so breit, wie die vorgegebene max-width. Zum Testen kannst du mit dem kleinen Resize-Dreieck^[1] die Breite des äußeren DIVs verändern.

Gruß
Jürgen

---

1. Kann man das eigentlich größer machen? ↩︎

[Gunnar Bittersmann]

@@Der Martin

Aber wenn du Textumbruch zulässt - wie breit ist denn dann "so breit wie der Inhalt"?

Ja. Aber: der Inhalt ist ausbalanciert (text-wrap: balance), d.h. die Zeilen sind in etwa gleich lang und füllen somit nicht die volle Breite aus. Die Textbox tut das aber. (Beispiel)

🖖 Live long and prosper

[Gunnar Bittersmann]

@@JürgenB

Bei der problematischen Seite soll das rosa Div nur so breit sein, wie sein Inhalt, und nicht die durch max-width gesetzte Breite einnehmen.

Fun fact: An sowas war ich auch gestern erst dran: Elfe im Wald.

Leider gelingt mir das nicht, wenn der Text im DIV umbricht.

Ja, das ist bei fit-content so, dass die Box bei mehrzeiligem Inhalt über die volle Breite (bei mir Höhe) geht.

Das Problem (oder wie man in Neusprech sagt: die Herausforderung) hatte ich bei der Wochenende-Bühne auch: Wenn da nicht nur „Wochenende“ steht, sondern die Überschrift mehrzeilig wird, beansprucht deren Box die volle Breite und reißt durch ihren weißen Hintergrund eine zu breite Lücke in den Rahmen.

Die Lösung ist, nicht einem Blockelement die Hintergrungfarbe zu geben, sondern einem Inline-Element – mit box-decoration-break: clone (TIL about coming downstairs), damit’s dann so aussieht: Die ganze Welt ist eine Bühne.

Das auf den Bildnachweis angewandt: Elfe mit box-decoration-break: clone.

Transparente Hintergrundfarbe ist problematisch: Die Höhe der Zeilenboxen hängt vom verwendeten Font ab. (Von dem tatsächlich auf dem jeweiligen System des Nutzers verwendeten, versteht sich.) Das heißt, bei denselben Angaben zu Schriftgröße und Zeilenabstand können die Zeilenboxen im Idealfall genau aneinander passen oder auch eine Lücke lassen oder sich überlappen.

Bei opaker Hintergrundfarbe lässt man sie dann überlappen (padding-block) und hat eine gleichmäßig gefüllte Fläche.

🖖 Live long and prosper

[JürgenB]

Hallo Gunnar,

ein weiteres Inline-Element für den Text war der entscheidende Tipp. box-decoration-break: clone hatte bei meinem Test keinen Effekt: Versuch 2

Gruß
Jürgen

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Fun fact: An sowas war ich auch gestern erst dran: Elfe im Wald.

In dem Codepen ist gegenübergestellt, wie man Grid anstatt absoluter Positionierung einsetzen kann, um auf elegante Weise Elemente übereinander zu platzieren. S.a. dieses Video.

🖖 Live long and prosper