【css】横並びのflexboxをオーバーフローさせる

事象

flexboxでoverflowさせたが、スクロールできない領域ができる...

原因

コンテナにflexアイテムが収まりきらない場合、flexboxはjustify-selfプロパティにcenterを指定されたときと同様に振舞うようです。
そしてjustify-self:centerの時は、コンテナに収まらない場合flexアイテムが両方向へ等しい大きさだけはみ出します...💦

解決策

space-betweenを使い、さらに疑似要素を使い両端の余白を再現する。

コード