高さが固定されていないコンテンツで
ページ下部だけスクロールしたい！
そんな時に役立つCSSです。

早速書き方です

<main>
	<section class="headBlock">
		<p>この部分は固定でスクロールしたくない！<br>
		でも上部はコンテンツの高さが固定ではなく可変するから高さが計算できません。<br>
		どんな情報がはいるかにもよるけど、下部だけスクロールしたいときってあるよね。<br>
		サンプル作ってみたので、ちょっと見てみて</p>
	</section>
	<section class="contentsBlock">
		<p>この部分はスクロールしたい！</p>
	</section>
</main>

main{
	height: calc( 100vh - 48px);	/*全体の高さだよ＊任意の高さに変更してね*/
	display: flex;					/*親です！宣言*/
	flex-direction: column;			/*カラム*/
}
main section{ padding: 30px ; }
.headBlock{
	background:#fafafa;
}
.contentsBlock{
	flex: 1;						/*横幅いっぱいに伸ばすので*/
	overflow: auto;					/*スクロールします宣言*/
	background:rgba(0,154,219,.5);
}

高さの部分のcalcはデモページのコピーライトを抜く計算をしているだけなので、calcを使う必要はありません。

基本的に必要な部分はコメントの入っている部分のみです。

デモページ