嵌套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