html5：具有固定顶部/底部和可滚动中间的三行Flexbox

是否有可能制作一个html5固定的 Flexbox 布局header/footer和一个可滚动的article如下所示的部分firefox 24 and chromium 31?

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

我已经尝试过这个（简化）：

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

现在我正在尝试用以下内容填充剩余空间article，但是如果内容高度小于窗口高度，则页脚不固定，如果内容高度大于窗口高度，则页脚滚动到可视区域之外......

您可能需要确保主体为 100% 高：

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

我制造了一个fiddle http://jsfiddle.net/RnBhH/2/.