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.

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?