¿Cómo podemos flexionar correctamente un elemento incrustado tanto vertical como horizontalmente utilizando la caja flexible?

He actualizado este problema con un caso de prueba más simple. El siguiente ejemplo es el problema en el que me he quedado atrapado. Si ejecuta el código HTML en un navegador, la pantalla se mostrará como se ve en la primera captura de pantalla a continuación. Sin embargo, si luego ingresa manualmente en el inspector web y ajusta manualmente la etiqueta window-wrapper de la siguiente manera:

flex-grow: 1;

la pantalla se renderizará como se desee – vea la segunda captura de pantalla. No entiendo por qué la etiqueta flex-grow no se mantiene en la etiqueta window-wrapper en la carga de la página. Esto sucede en todos los navegadores, así que me debe estar perdiendo algo.

Gracias de antemano por toda la ayuda.

captura de pantalla rota

página no procesada correctamente

captura de pantalla fija

página procesada correctamente

    TEST  body { background-color: #e9e9e9; font-size: 14px; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; display: flex; flex-direction: column; } html { background: #e9e9e9; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } html, body, .viewport { width: 100%; height: 100%; margin: 0; } #top_wrapper { height: 80px; min-width:885px; width:100%; margin-left:auto; margin-right:auto; text-align:center; background-color:#ff4422 } #window_wrapper { background-color:#ffffff; border: .2em solid gray; flex-grow: 1; } #page-head { width:730px; margin-top:12px; margin-left:auto; margin-right:auto; padding: 5px 0px 5px 0px; font-size:1.7em; color:black; background-color:green; text-align:center; } #page { width:716px; min-height:280px; margin-left:auto; margin-right:auto; background-color:#ffffff; text-align:center; } #title { width:500px; } #bottom-wrapper { height: 40px; min-width:885px; width:100%; margin-left:auto; margin-right:auto; border-top-left-radius:0px; border-top-right-radius:0px; background-color:#ff4422; }