CSS排板header及content填滿筆記

最近在設計網頁，在html/css/js方面仍是起步階段，遇到一個問題，就是如何將header以下的地方填滿。

首先要一個不固定高度的header ，下面放兩欄，兩欄都要填滿高度，而他們的內容都可能會溢出(overflow)，所以要在該欄overflow時使用滾動(scroll)

最後經過一輪google、stack overflow後，發現要先設html,body,兩列的高度到100%，(header高度不用調)，將兩欄套入一個div中，再將header和內容套入一個div中，用flex-grow將內容的高度填滿，同時overflow設為hidden，兩欄overflow設為auto，滿時就會自動溢出。

示意圖：

示範code：