Min-Max-Scroll

Ändere die Größe des Browserfensters.

Eine coole Lösung für die Darstellung, dieser Bilderreihe.

Das Blockelement welches die Bilder enthält hat eine width:60% und eine max-width: max-content . Dadurch wird es nicht größer, als die darin liegenden Bilder, die durch white-space:nowrap nebeneinander liegen.

Die horizontale Scrollleiste entsteht nur dann wenn sie benötigt wird overflow: auto und außerdem ändert sich die Höhe, wenn die Scrolleiste entsteht, so dass immer die gesamte Höhe der Bilder zu sehen ist durch: height: min-content;

Der kleine Zwischenraum unten, welche bei Bildern entsteht, wurde entfernt, mit line-height: 0%;

Industrie Industrie Industrie Industrie Industrie Industrie Industrie
.bilderBox {
    border: 2px solid #1D2B34;
    box-shadow: 6px 6px 3px 0px rgba(0,0,0,0.5);
    height: min-content;
    line-height: 0%;
    width: 60%;
    min-width: 370px;
    max-width: max-content;
    margin: 10px auto 30px;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
}
.bilderBox img {
    width: 120px;
}