Nested flexbox column inside flexbox row with packaging

Question

I have a page with nested flash drives: 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> 

And (appropriate) 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; } 

External flexbox ( .flex-group ) should be laid out from left to right. Internal flexboxes ( .flex-container ) are designed to be .flex-container from top to bottom and should wrap if there is not enough space (which is not in my jsfiddle). What I want is that .flex-container will grow in the X direction when the wrapper happens. But this does not happen. Instead, the containers overflow.

I want this to look (in Chrome): https://dl.dropboxusercontent.com/u/57880242/flex-good.png

Is there a way to get the .flex-container size appropriately in the X direction? I don’t want to hardcode their width, since the elements that appear in these lists will be dynamic.

Answer 1

I play with this for a few minutes, and I think I have what you are looking for.

Here is 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; } 

And here is the updated fiddle to see it in action.

Answer 2

Interesting, I do this too. I gave a flexible container flex: 1 100%; This evenly distributes the containers 100%; Blocks will flow in their own container space, and containers will maintain equal height and weight regardless of window size.

 .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 the fiddle here