嵌套Flexbox项目不扩展到可滚动时填充父级

Question

我一直在尝试使用CSS3 flexboxes创建以下布局，但遇到了绊脚石。

该布局有3个外部行，“标题”和“页脚”是固定的高度。中间弯曲以填充可用空间。中间行也必须是可滚动的。

在灵活的中间，有3列，左右两边固定宽度，中间弯曲以填充可用空间。

看看我到目前为止在这里：http://codepen.io/Samih/pen/yCHaI

一切都进行得顺顺当当，但在所有3级主要的浏览器（Chrome浏览器，Firefox和IE11）向下滚动，你会发现，在3列的背景/边框做不能扩展到父容器的整个高度。它们的高度在可见区域的高度处达到最大值，而不是容器的整个高度。

在此先感谢您的帮助。

Answer 1

section, article { 
    align-self: baseline; 
} 

http://codepen.io/anon/pen/HAJDs