Flexbox columns overlap

Question

I am trying to mimic the WinJS grouped list view using flexbox. I am getting close (I think) except that the columns overlap when resizing.

http://jsfiddle.net/w8ts4Lnx/5/

I want the items to stay inside the group and let the group grow horizontally.

body {
    height: 100%;
    display: flex;
    flex-flow: column wrap;
}

h1 {
   padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    display: flex;
    flex-flow: column wrap; 
    max-height: 600px;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    width: 200px;
}

Any ideas what I'm missing?

Answer 1

If you don't want your content to overflow the container you must specify flex-shrink: 0;

flex-shrink source

This 'number' component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1. The flex shrink factor is multiplied by the flex basis when distributing negative space.

Im not sure what winJS behavior you're trying to mimic since i've never used winJS, however I think this is closer to the proper behavior you're looking to achieve: http://jsfiddle.net/w8ts4Lnx/11/

Answer 2

The columns overlap because the contents doesn't fit. The Items don't fit in the group, so they flow-over. To solve this you have to specify an overflow-strategy for the group-div, with "overflow" like this (the last one):

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap; 
    max-height: 600px; 

    overflow: hidden;
}

The default is visible which make them fall outside. Read more here: http://www.w3schools.com/cssref/pr_pos_overflow.asp

There are other options than hidden. You can set vertical/horizontal scroll, or both. Just choose whatever gets you closer to that desired "WinJS grouped list view". Try:

overflow-x: scroll;
overflow-y: auto;

or

overflow-y: auto;
overflow-x: scroll;

Happy coding!

Answer 3

"let the group grow horizontally"- You have to use the flex-direction as "row" on the .group, and you have to wrap the groups inside the #content, then it won't overlap anymore..

http://jsfiddle.net/gafcvq9b/2/

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    display: flex;
    flex-flow: row wrap; 
    max-height: 600px;    
}