"Lösung"

Ich benutze den Begriff Lösung leicht, da dies wahnsinnig schwierig ist, ohne feste Zeilen wie Tomas vorgeschlagen (dh ohne den HTML zu einem konventionelleren Stil zu ändern) , oder im Allgemeinen ohne ein hohes Maß an Hacking. Darüber hinaus sind die Höhenhälften, sofern nicht 2 Reihen abgeschlossen sind, und das enthaltende div nicht zuverlässig verkleinert werden kann; Kommentieren Sie Kind 7 und sehen Sie, was passiert. Dann, wenn Sie auch 8 auskommentieren, sehen Sie, dass es wieder "normal" ist.

Ich habe schon seit einer Stunde rumgespielt und das Beste, was ich mir vorstellen kann, ist in dieser Geige. / p>

Ich möchte einen kleinen Hintergrund anbieten

Der Standardwert flex-flow ist row nowrap , dies legt eine bestimmte Breite x auf dem Element fest, das das Glück hat, diese Regel zu erhalten. Es scheint, dass in diesem Fall das Ändern der flex-flow in column nicht die für dieses Element definierte Breite x zurücksetzt. Das Element hat die Breite x , als wäre es flex-flow: row nowrap (probiere das selbst aus).

Es gibt eine ganze Menge von Vererbungsproblemen, die davon herrühren. Wir können die flex-basis -Eigenschaft nicht setzen (es soll sich nicht so verhalten wie ich glaube), also müssen wir alles in ein anderes Element .container umwandeln, was wir können definiere Breite auf und setze stattdessen die tatsächlichen Spaltenstile auf ein .row -Element. % Co_de% wird jedoch auch nicht verkleinert. Im besten Fall haben wir unsere Spalte richtig in der Breite definiert mit dem .container (ing) -Element, damit beide ihre eigene Sache machen.

Daher benötigen wir ein Pseudoelement .container , um den Hintergrund mit der korrekten Breite zu versehen, einschließlich einiger ::after und margin hacks, um das Padding zu simulieren.

Ich könnte viel mehr tippen, aber ich denke nicht, dass dies eine praktikable Lösung überhaupt ist, wirklich nur ein "Beweis" dafür, wie es nicht gut gemacht werden kann.

Wenn Sie mehr Zeilen hinzufügen möchten, müssen Sie die Breite von 50% für 2 (1/2) auf 33% für 3 (1/3) usw. ändern. Es ist nicht so skalierbar wie das Bearbeiten das HTML selbst.

Zum Schluss, es gibt nur eine funktionierende Demo für zwei Zeilen, aber im Moment erscheint das mit der aktuellen HTML-Markup-Struktur nicht plausibel.

Sie haben das Breitenverhalten des übergeordneten Elements nicht festgelegt. Setzen Sie die Anzeigeeigenschaft .container auf Inline-Block und für jedes .row -Element add display: flex-Eigenschaft.