Problems with using flexbox for vertically aligning

Question

I have a page-wide wrapping div that has flexbox alignment to center:

.app_container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-item