How to use css3 flexbox to create multi-column layout without expanding vertically?

From what I've seen with the Chrome and Opera implementations for Flexbox, a flex-direction of column requires restricting the height of the element, otherwise it will continue expanding vertically. It doesn't have to be a fixed value, it can be a percentage.

That said, the layout you want for your .group elements can also be achieved by using the CSS Columns module. The flow of the elements will be similar to that of the flexbox column orientation, but it will create columns as long as there's enough width for them, regardless of how long the document is.

http://jsfiddle.net/Yht4V/8/ (you'll have to excuse the lack of prefixes)

html {    height: 100%;}body {    height: 100%;    display: flex;    flex-flow: column nowrap;}h1 {    padding: 1em;}#content {    padding: 10px;    background-color: #eee;    display: flex;    flex-grow: 1;}#content > .group {    margin: 10px;    padding: 10px;    border: 1px solid #cfcfcf;    background-color: #ddd;    flex: 1 1 auto;}#content > .group:first-child {    columns: 10em;    flex-grow: 2;    }#content > .group .item {    margin: 10px;    padding: 10px;    background-color: #aaa;    break-inside: avoid;}#content > .group .item:first-child {    margin-top: 0;}

Leaving it as a bunch of nested flexboxes, this was about as close as I could get it:

http://jsfiddle.net/Yht4V/9/ (again, no prefixes)

html {    height: 100%;}body {    height: 100%;    display: flex;    flex-flow: column nowrap;}h1 {    padding: 1em;}#content {    padding: 10px;    background-color: #eee;    display: flex;    flex: 1 1 auto;    height: 100%;    width: 100%;}#content > .group {    margin: 10px;    padding: 10px;    border: 1px solid #cfcfcf;    background-color: #ddd;    display: flex;    flex-flow: column wrap;    flex: 1 1 30%;    max-height: 100%;}#content > .group .item {    margin: 10px;    padding: 10px;    background-color: #aaa;}

Replace the following in your css - display: -webkit-flex;to the following - display: -webkit-box;

This worked very well for me :-)