The footer is behind the outer element because
being a fixed element outer is removed from the normal flow of the
DOM elements. You don't need position: fixed here - remove it and get the footer right below the flexbox.

If filling everything in the viewport is what you desire, you can use viewport units (vh) instead of position: fixed to get the effect of filling everything in the viewport.

So here is something that will get you started:

Removed position: fixed for the outer element

Wrapped outer and footer into a wrapper element with column flex-flow:

.wrapper{
display: flex;
flex-direction: column;
height: 100vh;
}

Also distribute 100vh to the footer and outer element- say for illustration 90vh for outer and 10vh for footer

Give overflow-y: auto to outer and flex-shrink: 0 to header.

For smaller viewport heights, the margin of p in footer may cause overflow of body- you can set margin: 0 for the p.