Respektieren Sie die Breite des mehrspaltigen Text-Divs neben den Geschwistern in Flexbox

Ich habe Probleme, einen Text div zusammen mit einer Gruppe von Bildern in einer flexbox Zeile einzufügen. Diese Geschwister respektieren zur Zeit nur die column-width -Eigenschaft des Textes div , als ob es eine Gesamtbreite ist und überlappen die Breite, die darüber hinaus bei verschiedenen Fenstergrößen vorhanden ist. Die Anzahl der Bilder und die Länge des Textes ist dynamisch, da sich der Inhalt beim Laden der Seite ändern kann. Das Layout ist auch ansprechend, so dass ich in vielen Fällen nicht den Luxus von festen Abmessungen habe. Ich glaube, ich habe das Problem mit folgendem Beispiel auf ein funktionierendes Beispiel reduziert:

HTML:

CSS:

Codepen: Ссылка

Wie vorgesehen, erscheint der Text vor den Bildern. Es erzeugt jedoch viele Spalten von 160px, die für den Textinhalt benötigt werden. Die Bilder beginnen jedoch nicht nach dem Textinhalt, sondern überlappen das Div (Sie können kaum den größten Teil des Textes ausmachen, der hinter den Bildern hervorsteht im CodePen-Beispiel). Es gibt eine Lösung für dieses auch durch Javascript aber es fühlt sich OTT an. Sicherlich kann ein mehrspaltiges Text-Div in einer Flexbox Platz schaffen, ohne dass andere Objekte drüber drängen.

Mit anderen Worten:

Gibt es eine Möglichkeit, die Flex-Elemente in #maincontainer zu respektieren und Platz für die Gesamtbreite von #text zu schaffen (während #text seine eigene Eigenschaft column-width bei allen Fenstergrößen berücksichtigt)?

Gegenwärtig überlappen sich die anderen Flex-Objekte (die Bilder) und berücksichtigen nicht die Gesamtbreite von #text , oder #text verkleinert die Spalten auf kleinere Größen als column-width bei kleineren Fenstergrößen. Da ich ein column-width (160px) für #text angegeben habe, sollte das nächste flex item bei 480px + padding usw. rechts vom Text beginnen, wenn #text 3 Spalten hat. 640px + Padding, wenn es 4 usw. hat.

Wenn jemand Schwierigkeiten hat zu interpretieren, was ich mit Respekt meine, schließe ich die Handlung aus, Platz dafür zu machen. Wenn die Breite eines Elements bei 200px endet, sollte sein nächstes Geschwister bei 200px + usw. beginnen. Dies ist das Verhalten, das die meisten Designer aus der relativen Positionierung und / oder dem Floaten kennen würden. Es ist auch das übliche Verhalten in Flexboxen.

Aktualisieren

Das Abfragen der Elementbreite von #text in JavaScript (naja, jquery, mit $("#textcontainer").width(); ) gibt einen Wert zurück, der mit meinem angegebenen column-width -Wert identisch ist.

Javascript (und daher, ich schätze, der Browser) sieht die Gesamtbreite des #text -Elements als column-width -Wert, was ein Gefühl dafür ergibt, warum die benachbarten Flex-Objekte sich mit #text überschneiden die Breite einer Spalte. Ich habe dies sowohl in Chrome als auch in Safari zu den neuesten Versionen von beiden auf macOS bestätigt.

Ich habe tatsächlich eine funktionierende Lösung mit Javascript erstellt, möchte aber trotzdem vermeiden, sie zu benutzen. Es scheint nur ein bisschen lächerlich, dass diese grundlegende Zusammensetzung Notwendigkeit ist so kompliziert zu lösen, wie dies.

Update2

Ich bin mir nicht sicher, wie diese Illustration besser verdeutlicht: "Ich brauche die Geschwisterbilder, um die Gesamtbreite von #text zu respektieren, anstatt sie zu überlappen", aber ich schließe sie ein, falls gewünscht. A ist die erforderliche Lösung bei allen Fenstergrößen, B ist was passiert: