◆ センタリングしてかつ はみ出たらスクロールバーを出す
justify-content で要素を中央揃えにしているところで はみ出たらスクロールバーを出したいというだけだったのですが やってみると最初の方の要素が表示されない問題が起きて苦戦しました
あれこれ試した結果どうにか CSS のみで解決できました

問題点

まず普通に 「justify-content: center」 します
縦方向に div を並べてセンタリングします

<!doctype html>

<style>
	.container {
		width: 100px;
		height: 100px;
		margin: 100px;
		background: #fff555;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}
</style>

<div class="container">
	<div>A</div>
	<div>B</div>
</div>

jcenter-scroll01

要素数が増えてはみ出るようになると……

<!doctype html>

<style>
	.container {
		width: 100px;
		height: 100px;
		margin: 100px;
		background: #fff555;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}
</style>

<div class="container">
	<div>A</div>
	<div>B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
	<div>G</div>
	<div>H</div>
</div>

jcenter-scroll02

こういう感じになりますよね
なので 「overflow: auto」 をつけると……

<!doctype html>

<style>
	.container {
		width: 100px;
		height: 100px;
		margin: 100px;
		background: #fff555;
		display: flex;
		flex-flow: column;
		justify-content: center;
		overflow: auto;
	}
</style>

<div class="container">
	<div>A</div>
	<div>B</div>
	<div>C</div>
	<div>D</div>
	<div>E</div>
	<div>F</div>
	<div>G</div>
	<div>H</div>
</div>

jcenter-scroll03

一番上までスクロールしてるのに A などが見えません
「overflow: auto」 をつける前の状態で黄色のエリアの一番上にあった C からしか見えていません
単純にはみ出た範囲が消されるだけみたいです
CSS は flexbox 関係なくマイナス方向へのはみ出しはスクロールバーが出ませんからね

対処方法

マイナス方向にはみ出ている要素にスクロールバーをつけるとどうしようもないので 内側に要素を作ってそこにスクロールバーをつけることにしました
さらにその要素には 「max-height: 100%」 を付けて親要素をはみ出さないようにします
こうすることで親要素をマイナス方向にはみ出すことなしにスクロールバーが出せました

<!doctype html>

<style>
	.container {
		width: 100px;
		height: 100px;
		margin: 100px;
		background: #fff555;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}

	.inner {
		max-height: 100%;
		overflow: auto;
	}
</style>

<div class="container">
	<div class="inner">
		<div>A</div>
		<div>B</div>
		<div>C</div>
		<div>D</div>
		<div>E</div>
		<div>F</div>
		<div>G</div>
		<div>H</div>
	</div>
</div>

jcenter-scroll04

要素が少なくなった場合は .inner が親より小さくなって justify-content の機能でセンタリングされます
.container の高さを range バーで動かして試せる版も用意しました

<!doctype html>

<style>
	.container {
		width: 100px;
		height: 100px;
		margin: 100px;
		background: #fff555;
		display: flex;
		flex-flow: column;
		justify-content: center;
	}

	.inner {
		max-height: 100%;
		overflow: auto;
	}

	.range {
		width: 100px;
	}
</style>

<input class="range" type="range" min="100" max="400" value="100">

<div class="container">
	<div class="inner">
		<div>A</div>
		<div>B</div>
		<div>C</div>
		<div>D</div>
		<div>E</div>
		<div>F</div>
		<div>G</div>
		<div>H</div>
	</div>
</div>

<script>
	document.querySelector(".range").oninput = (eve) => {
		document.querySelector(".container").style.height = eve.target.value + "px"
	}
</script>