16

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:

enter image description here

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.

3
  • Should the entire thing be fluid no matter how large/small you make the window? Why do items have fixed 200px width? Should any .group be able to have columns or just the first? Should there be any overflow at all? (what if I add 100 items to each group) Flexbox doesn't make stackable columns like what you want, that's not a layout goal for flexbox. Getting what you want in your pic is easy I just don't know all of the scaling requirements, which might make it very hard or impossible with just CSS. Commented Dec 30, 2012 at 3:25
  • @skyline3000 I'm experimenting with a Windows 8 "metro" style design with plain HTML/CSS, so ideally each group would add columns horizontally as needed and cause a horizontal 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.
    – Bret Kuhns
    Commented Dec 31, 2012 at 0:20
  • @skyline3000 To answer you questions directly: Yes, it should be fluid regardless of height/width of the screen (I don't have control over screen size). Each item is fixed size by design, this will be true for my final implementation. Perhaps not those exact dimensions, but fixed nonetheless. Finally, as I mention above, elements should fill vertically then overflow horizontally.
    – Bret Kuhns
    Commented Dec 31, 2012 at 0:26

2 Answers 2

11

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;
}
0

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

This worked very well for me :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.