CSS Flex: Probleme beim Anordnen von <div>s

[ottogal]

Hallo in die Runde,

bei einem Masonry-Layout kommt es oft (z.B. bei einer Foto-Galerie) nicht auf die genaue Reihenfolge der Boxen an. Dann könnte man so mit Flex eine Annäherung an das Gewünschte versuchen:

https://codepen.io/ottogal/pen/VwJPEVe

Dabei erzwingt eine max-height-Angabe für den flex-container (hier das main-Element) beim Verbreitern des Viewports das Umbrechen in weitere Spalten.

Durch overflow: auto; für den flex-container wird ein Scrollbalken gezeigt, wenn die Zahl der Spalten zu groß wird. (Ich habe jetzt keine Idee, wie man die Höhenbeschränkung so dynamisieren kann, das der Überlauf vermieden wird.)

Viele Grüße
ottogal