Holy grail layout using Flexbox

Hi,

I'm playing with flexbox under chrome in an attempt to see how easy it
is to get the "holy grail layout" working. For those that don't know,
the holy grail layout is (as far as i understand it) a layout with:
- 1 Header
- 1 Footer
- 2 or 3 columns
By default it shows at 100% if there is too little to bring it at 100%
once the content is bigger then the 100% it stretches. So the footer
moves down and the content stretches (the columns).

The HTML/CSS that i made shows is a near perfect holy grail layout.
However, i seem to be having some magic white space that doesn't seem
to be going away. While the align-content is set to stretch.. It seems
to show as if it where set at space-between. So now i'm wondering if
this issue is in my HTML or if i just found a bug in the webkit
rendering for the flexbox spec?

You can find the HTML/CSS here: http://jsfiddle.net/nBvVD/
An image of how it looks when i test it:
http://ompldr.org/vaHc2aQ/holy_grail_layout_using_flexbox.png
The browser version i used for that screenshot: Chrome 26.0.1410.43

Cheers,
Mark

Received on Tuesday, 26 March 2013 22:39:46 UTC