zagnieżdżony kolumna flexbox wewnątrz rzędu flexbox z owijania

Question

Mam stronę zagnieżdżonych giętkie pudełek tu: http://jsfiddle.net/fr0/6dqLh30d/

<div class="flex-group"> 
    <ul class="flex-container red"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    </ul> 

    <ul class="flex-container gold"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    </ul> 

    <ul class="flex-container blue"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    <li class="flex-item">6</li> 
    <li class="flex-item">7</li> 
    <li class="flex-item">8</li> 
    </ul> 
<div> 

A (zastosowanie) CSS

.flex-group { 
    display: flex; 
    flex-direction: row; 
    height: 500px; 
} 

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    border: 1px solid silver; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    flex: 0 0 auto; 
} 

.flex-item { 
    padding: 5px; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 

    line-height: 100px; 
    color: white; 
    font-weight: bold; 
    font-size: 2em; 
    text-align: center; 
} 

Zewnętrzna flexbox (.flex-group) jest przeznaczone do układania od lewej do prawej. Wewnętrzne flexboxy (.flex-container) są przeznaczone do układania od góry do dołu i powinny zawijać, jeśli nie ma wystarczającej ilości miejsca (czego nie ma w moim jsfiddle). To, co chcę, to to, że .flex-container s będzie rosnąć w kierunku X, gdy nastąpi owijanie. Ale tak się nie dzieje. Zamiast tego pojemniki są przepełnione.

Co chcę wyglądać (w Chrome): https://dl.dropboxusercontent.com/u/57880242/flex-good.png

Czy istnieje sposób, aby uzyskać .flex-container S do wielkości odpowiednio w kierunku X? Nie chcę sztywno zakodować ich szerokości, ponieważ elementy pojawiające się na tych listach będą dynamiczne.

Answer 1

Gram z tym od kilku minut i myślę, że mam to, czego szukasz.

Oto CSS

.flex-group { 
    margin: auto; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-around; 
} 

.flex-container { 
    flex: 0 1 auto; 

    display: flex; 
    flex-flow: row wrap; 
    align-items: space-around; 
    align-content: flex-start; 

    padding: 0; 
    margin: 0; 
    list-style: none; 
    border: 1px solid silver; 
} 

.red li { 
    background: red; 
} 

.gold li { 
    background: gold; 
} 

.blue li { 
    background: deepskyblue; 
} 

.flex-item { 
    flex: 0 1 auto; 

    padding: 5px; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 

    line-height: 100px; 
    color: white; 
    font-weight: bold; 
    font-size: 2em; 
    text-align: center; 
} 

A oto updated fiddle, aby zobaczyć go w akcji.

Answer 2

Ciekawe, ja też bawię się z nim. Dałem flex-containerowi flex: 1 100%; To równomiernie rozstawia pojemniki na 100%; Bloki będą płynąć we własnej przestrzeni kontenerowej, a pojemniki będą utrzymywać równą wysokość i wagę niezależnie od wielkości okna.

.flex-container { 
    flex: 0 100%; 
    display: flex; 
    flex-flow: row wrap; 
    align-items: space-around; 
    align-content: flex-start; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    border: 1px solid silver; 
} 

See fiddle here