Ich habe einen Container, den ich nicht als Inline-Block festlegen möchte und der Inline-Block-Elemente enthält. Diese Elemente laufen aus dem Container über, anstatt ihn zu verlängern. Wie kann ich dieses Verhalten verhindern?

Dem

#inline-block-container {
background-color: red;
white-space:nowrap;
}

.inline-block-element {
background-color: blue;
width: 50px;
height: 30px;
margin: 10px;
display:inline-block;
}

In dieser Demo möchte ich, dass das rote Rechteck (auch außerhalb des Ansichtsfensters) alle blauen Rechtecke (visuell) enthält.

-Bearbeiten

uf meiner realen Seite:

Sie können sehen, dass der Hintergrund (Verlauf hellgrau) am rechten Rand des Fensters endet (bevor Sie nach rechts scrollen). Es gibt auch einen Bootstrap-Tooltip (in Schwarz), der falsch positioniert ist und für ein Kontextmenü identisch ist. Der Container, der Body und das HTML-Tag werden außerhalb der ursprünglichen Ansicht nicht erweitert, da die Inline-Block-Elemente außerhalb ihres Containers überlaufen.

Ich kann die Größe in CSS nicht festlegen, da sich der Inhalt der Elemente (dimgray) ändern kann.

Ich habe versucht, den Container als display: table: das gleiche Ergebnis zu setzen. Ich habe Position: Absolut ausprobiert: Es bremst die Dinge und löst das Problem nicht. Ich habe inline-flex ausprobiert: gleiches ergebnis.

Danke im Voraus

Freundliche Grüße