<header> auf Inhalt ausdehnen

[Friedel]

Hallo, obwohl ich glaube, ähnliche Fragen hier schon mehrfach gelesen zu haben, bringt die Suchfunktion keine Treffer.

Ich habe eine Seite, in der oben ein <header> und darunter ein <nav>-Element ist.

header {
  background-color: #bbb;
}

nav {
  background-color: #ddd;
  padding: .2em 2em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}

Eigentlich halte ich Browser mit winzigen Viewports bei dieser Anwendung für irrelevant, aber mich stört das Aussehen, wenn man waagerecht scrollen muss, trotzdem. Wenn ich in der Mobil-Ansicht des Firefox einen Viewport mit weniger als 264px Breite einstelle, erscheint eine waagerechte Scollbar. Und wenn man dann nach rechts scrollt, endet die Hintergrundfarbe des Headers und der nav natürlich bei 100vw und der Inhalt ragt heraus. Wie kann ich die Breite der beiden Elemente auf die Breite des Inhalts ausdehnen?

Edit: Inzwischen tritt das Problem nicht mehr in der Form auf, weil ich aus anderen Gründen ein paar &shy; in das Wort Mitfahrzentrale eingebaut habe. Aber natürlich bin ich trotzdem an der Lösung interessiert.

[Rolf B]

Hallo Friedel,

die Hintergrundfarbe endet, weil die nav Box zu Ende ist und die Navigationselemente aus der Box hinausragen (overflow:visible).

Du könntest die Hintergrundfarbe auf die nav Elemente legen (li oder a). Es mag sein, dass Du dann die paddings oder margins etwas zurechtzupfen musst, damit es visuell schön aussieht.

Rolf

[Gunnar Bittersmann]

@@Friedel

Eigentlich halte ich Browser mit winzigen Viewports bei dieser Anwendung für irrelevant,

Für Nutzer, die die Schrift stark vergrößern, wird auch ein „normaler“ Viewport zu einem winzigen.

aber mich stört das Aussehen, wenn man waagerecht scrollen muss, trotzdem. Wenn ich in der Mobil-Ansicht des Firefox einen Viewport mit weniger als 264px Breite einstelle, erscheint eine waagerechte Scollbar. Und wenn man dann nach rechts scrollt, endet die Hintergrundfarbe des Headers und der nav natürlich bei 100vw …

Schon bei 100%.

… und der Inhalt ragt heraus. Wie kann ich die Breite der beiden Elemente auf die Breite des Inhalts ausdehnen?

min-width: max-content. Guckst du.

😷 LLAP

[Friedel]

min-width: max-content. Guckst du.

Danke. Das hab' ich gesucht.

[Friedel]

Edit: Das hat nichts gebracht. Im Gegenteil. Damit werden alle Zeilenumbrüche unterbunden. Die Überschrift wird nicht mal mehr zwischen den Wörtern umgebrochen.

Ich hatte mich gewundert, dass Google mir überhaupt nichts brauchbares angezeigt hat, als ich nach „css min-width content“ gegoogelt hatte. Eigentlich erwarte ich, dass ich damit auch auf einer der ersten Seiten Treffer mit „min-width: max-content“ habe. Aber dass auch die Suchfunktion im Wiki nichts gebracht hat, verstehe ich nicht.

Noch ein Edit: Wie ich aus der Erinnerung vermutet hatte, funktioniert es mit „min-width: content“. Das ist aber offensichtlich nirgends beschrieben.

[Gunnar Bittersmann]

@@Friedel

Noch ein Edit: Wie ich aus der Erinnerung vermutet hatte, funktioniert es mit „min-width: content“. Das ist aber offensichtlich nirgends beschrieben.

Du meinst: mit min-width: min-content?

Grmpf, dabei hatte ich das zuerst. Später dann verschlimmbessert, bei „Donaudampfschiffahrtsgesellschaftskapitän“ machte das keinen Unterschied.

😷 LLAP

[Friedel]

Mit min-width: min-content funktioniert es wie gewünscht. Das, woran ich mich so unvollständig erinnert habe, war allerdings min-width: fit-content. Das klappt aber nicht so gut.

… bei „Donaudampfschiffahrtsgesellschaftskapitän“ machte das keinen Unterschied.

Aber nur weil du keine Silbentrennung zulässt. Mit Silbentrennung (durch ­) ist es ein großer Unterschied.