I'm playing with css3's flexbox in Chrome (no need to worry about cross-browser for this). I'm having a hard time convincing it to lay out my content the way I'd like. Here's a sketch of my goal:
Here's a jsFiddle of my attempt: http://jsfiddle.net/Yht4V/2/ This seems to work great except each .group
will expand its height rather than create multiple columns.
I'm using flexbox pervasively here. The body
lays out vertically, with the #content
div taking the remaining height of the page. Each .group
is laid out horizontally. Finally, each .item
is laid out within a .group
vertically with wrapping.
Unfortunately, each .group
ends up as a single column by expanding the #content
height, which causes a vertical scrollbar (unwanted). If I set the height of each .group
to a fixed pixel size, the items break out into multiple columns, but this defeats the fluidity of the flexbox. Here's what it looks like with fixed heights: http://jsfiddle.net/Yht4V/3/
So, how can I get my #content
div to not expand vertically since everything is managed with flexboxes without setting a fixed height? I was expecting the flexbox to trigger more columns instead of expanding the height of its parent and causing a scrollbar.
iff
necessary (so add elements vertically first, then wrap by column horizontally). I can picture ways to accomplish this with JS, but was hoping it could be done with only HTML5/CSS3 in Webkit.