Pie de página difícil con flexbox

Encontré una manera muy simple de crear un pie de página adhesivo para mi sitio web, y a primera vista parece funcionar perfectamente.

Pero como no veo a otras personas usando lo mismo, Me pregunto si esta forma de hacerlo está rota, fuera de los navegadores que no admiten la caja flexible en absoluto?

Uso bootstrap para configurar flex-box, y estoy trabajando en React, aquí está mi código:

<div className="body-div d-flex flex-column justify-content-between">
  <div>  <!-- inner div -->
    <MainNav/>
  </div>
  <MainFooter className="d-flex flex-column"/>
</div>

Para las personas que no saben reaccionar: el div externo puede verse como el elemento del cuerpo en una página html 'normal'.

css para el body-div:

min-height: 100vh;

ásicamente, dejé que el div interno y el pie de página principal se empujaran hacia arriba y hacia abajo, respectivamente, configurando su contenedor en flex-box con la propiedad de justify-content establecida en espacio intermedio.

También me gustaría agregar que el contenido de mi sitio, a excepción del pie de página, irá dentro del div interno.

Respuestas a la pregunta(1)

Su respuesta a la pregunta