Verwenden Sie CSS, um die Überlaufliste zur nächsten Spalte des übergeordneten Elements fortzusetzen

Question

Grundsätzlich habe ich einen übergeordneten Container <div> und dann habe ich Kinderelemente in dort, die mit display: flex;flex-direction:column;flex-wrap:wrap; ausgerichtet sind. Bis jetzt ist das gewünschte Layout, dass der Container eine feste Höhe hat und nach rechts scrollen wird, wenn mehr und mehr Inhalt zu den Child-Elementen hinzugefügt wird.

Alle untergeordneten Elemente haben eine feste Breite und werden in den Spalten gestapelt, beginnend oben links und dann die nächste Zeile rechts oben nach unten.

Ich habe alles richtig so weit arbeiten, Mein Problem ist ...

Was passiert, wenn eines der Kinder Elemente ist ein <ul> und kann sagen, dass jetzt diese neue Liste <li> hat, die ihre Eltern überlaufen. Was passiert ist, dass die <ul> wird in der Höhe wachsen und wird dann in die nächste Spalte verschoben werden. Ich möchte nicht, dass das passiert. Ich möchte die <ul> starten, wo es normalerweise wäre, wenn es nicht übergelaufen wäre und dann irgendwie suche ich nach einem Weg für die Kinder <li> Elemente in die nächste Zeile der Listen 'Container den ganzen Weg oben an der Spitze zu bewegen mein Bild, das ich in MS Farbe zog - nicht die beste visuelle Hilfe - sorry

ich habe auch versucht, von Geige Dieser Code ein stripped down version in a fiddle right here

neu zu erstellen, die mit kommen Kinder nur eine sehr grundlegende Container erstellt, zeige das "Problem" an oder ich sollte nur unerwünschte Ergebnisse sagen, die gerade geschehen

<div class="container"> 
    <div class="child"> </div> 
    <p class="text child"> </p> 
    <ul class="list"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    <li>five</li> 
    <li>uno</li> 
    <li>doce</li> 
    <li>tries</li> 
    <li>quatro</li> 
    <li>sinco</li> 
    <li>siete</li> 
    <li>ocho</li> 
    <li>nueve</li> 
    <li>doce</li> 
    <li>tries</li> 
    <li>quatro</li> 
    <li>sinco</li> 
    <li>siete</li> 
    <li>ocho</li> 
    <li>nueve</li> 
    </ul> 
</div> 

und die CSS

.container{border:2px solid blue; width:1000px; height:350px; display:flex; 
     flex-direction:column;flex-wrap:wrap; position:relative;padding:3px;} 

.text{ height:75px;width:200px;border:2px dotted red;display:inline-block; } 

.list{flex-wrap:wrap;flex-direction:column;display:flex;width:165px;height:75px; 
    border:2 px dashed purple;} 

.list li{;flew-wrap:wrap;display:flex;width:200px} 

.container div{height:100px;width:200px;border:2px dotted green;display:inline-block;} 

Answer 1

Versuchen columns/-webkit-columns mit:

.container [ 
    columns: 3; 
    -webkit-columns: 3; 
} 

Updated fiddle.