CSS Flex Overflow Clipping Top [duplicate]

Fiddle here: https://jsfiddle.net/2675tu34/1/

So when you stretch out the display area in red, the green box centers nicely vertically and horizontally. However, when you make the area smaller so that that overflow scrollbars kick in, the top part gets clipped off and is not scrollable.

I'm trying something like this, and have played with may variations but it never quite works.

#parent {    background-color:red;    position: fixed;    top: 0;    left: 0;    width: 100vw;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    overflow-y: auto;}#child {    background-color:green;}

Anyone have a fix for this?