Flexbox centered, scrollable container

README.md

Not the first time I'm having this problem. This time I will document my solution for future reference.

Preface

The goal is to have root container (usually the #root container of the page), which centers its child element when the child is small enough to fit on the page. Otherwise, the container employs vertical scrollbar.

Solution

TL;DR: add margin: auto; on the child.

Link

https://jsbin.com/juwevemizi/edit?html,css,output

Relevant StackOverflow question:

https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container