除非内容溢出视口,否则居中对齐flexbox容器

要使用flexbox垂直和水平居中div,我只需将这些规则应用于它的父级

display: flex;
align-items: center;
justify-content: center;

所以它会像这样显示:

然而,当div中有更多内容时,视口中有高度,它会使内容溢出网页,使其不可见,并且无法向上滚动,如下所示:jsfiddle.net/xk1z6wpa/2

我需要div从顶部不溢出网页,而是在到达之前停止,因此只会从底部溢出 - 所以:

我怎么能做到这一点？