html5: three-rows flexbox with fixed top/bottom and scrollable middle

Question

Is it possible to make an html5 flexbox layout with fixed header/footer and a scrollable article section like the following for firefox 24 and chromium 31?

+----------+
| header   |
+----------+
| article ||
|         ||
|         ||
|         ||
+----------+
| footer   |
+----------+

I've tried this (simplified):

body {
  display: flex;
  flex-direction: column;
}
header {
  flex: 1;
}
article {
  flex: 8;
  overflow-y: scroll;
}
footer {
  flex: 1;
}

and now I'm trying to fill the remain space with the article, but if the contents height is smaller than the window height, the footer is not fixed and if it's bigger, the footer scrolls out of the viewable area...

Answer 1

You probably need to make sure the body is 100% high:

html, body {
    margin:0;
    height:100%;
    min-height:100%;
}

I made a fiddle.