Friedel: <header> auf Inhalt ausdehnen

problematische Seite

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.

  1. problematische Seite

    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

    --
    sumpsi - posui - obstruxi
  2. problematische Seite

    @@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

    --
    „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
    1. problematische Seite

      min-width: max-content. Guckst du.

      Danke. Das hab' ich gesucht.

      1. problematische Seite

        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.

        1. problematische Seite

          @@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

          --
          „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
          1. problematische Seite

            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 &shy;) ist es ein großer Unterschied.