Estoy desarrollando una aplicacion con React, React-router, Material UI y Redux-Toolkit. Estoy teniendo problemas para estilar la altura de los componentes que renderiza . Aclaro que soy un principiante con css y mucho mas con material, pero he investigado y todavia no encuentro solucion. Este es mi Router:

import React from 'react'
import ReactDOM from 'react-dom/client'
// import App from './App.jsx'
import './index.css'
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom"
import Root from './routes/root';
import ErrorPage from './errorPage';
import Applications from './routes/applications';
import Stats from './routes/stats';
import Sign from './routes/signContainer';
import SignInForm from './components/signInForm';
import SignUpForm from './components/signUpForm';
import { Provider } from 'react-redux'
import { store } from './redux/store'
import LandingPage from './routes/landingPage';
import PublicationsContainer from './routes/publicationsContainer';

const router = createBrowserRouter([
  {
    path: "/",
    element: <LandingPage/>,
    errorElement:<ErrorPage/>,
  },
  {
    path:"/signup",
    element:<Sign component={<SignUpForm/>} />
  },
  {
    path:'/signin',
    element:<Sign component={<SignInForm/>} />
  },
  {
    path:"/home",
    element:<Root/>,
    children:[
      {
        path: "postulaciones",
        element: <Applications/>,
      },
      {
        path: "publicaciones",
        element: <PublicationsContainer/>,
      },
      {
        path: "estadisticas",
        element: <Stats/>,
      }
    ]
  }
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>,
)

este es mi layout:

import { Outlet, useNavigate } from "react-router-dom";
import { Box, CssBaseline } from "@mui/material";
import Footer from "../components/footer";
import NavBar from "../components/navBar";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUserInfo } from "../redux/actions/userActions";


export default function Root() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const { userInfo } = useSelector((state) => state.user)
  const getinfo = async (id)=> {
    await dispatch(getUserInfo(id)).unwrap()
  } 
  useEffect(() => {
    if (!userInfo) {
      const userId = localStorage.getItem('userId')
      getinfo(userId)
    }
    if (window.location.pathname === '/home') {
      navigate("/home/postulaciones");
    }
  }, [navigate]);
  
  return (
    <Box minHeight="100vh" display="flex" flexDirection="column">
      <CssBaseline />
      <NavBar />
      <Box component="main" flexGrow={1} id="content" bgcolor="red" >
        <Outlet />
      </Box>
      <Footer />
    </Box>
  );
}

Lo que quiero lograr, es que los componentes que renderiza el tengan una altura del 100% entre el navbar y el footer.
Le puse un bgcolor en red para poder apreciar la altura del componente, que en este caso esta ocupando bien el 100% entre el navbar y el footer,pero el problema es con los componentes del outlet. Dejo un ejemplo de un componente que renderiza el outlet:

import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUserApplications } from "../redux/actions/applicationsActions";
import {
  Container,
  Typography,
  CircularProgress,
  Box,
  Button,
  Grid,
} from "@mui/material";
import { Add as AddIcon } from "@mui/icons-material";
import ApplicationItem from "../components/applicationItem";
import Filters from "../components/filter";
import PaginationComp from "../components/paginationComp";

export default function Applications() {
  const dispatch = useDispatch();
  const id = localStorage.getItem('userId')
  const { error, loading, userApplications } = useSelector(
    (state) => state.applications
  );
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 8;

  useEffect(() => {
    if (!userApplications) {
      dispatch(getUserApplications(id));
    }  
  }, []);

  const handlePageChange = (page) => {
    setCurrentPage(page);
    };
    
  const startIndex = (currentPage - 1) * itemsPerPage;
  const visibleApplications = userApplications?.slice(startIndex, startIndex + itemsPerPage);
  
  return (
    <>
    <Box bgcolor="blue" padding={2} height="100%">
      <Container maxWidth="lg">
        <Grid container alignItems="center" spacing={2} marginBottom={2}>
          <Grid item xs={20} sm={8}>
            <Typography
              variant="h4"
              style={{ fontFamily: "Outfit, sans-serif", color: "#333333" }}
            >
              Mis Postulaciones
            </Typography>
          </Grid>
          <Grid item xs={201} sm={4}>
            <Box display="flex" justifyContent="flex-end">
              <Button
                variant="contained"
                color="primary"
                startIcon={<AddIcon />}
              >
                Agregar
              </Button>
            </Box>
          </Grid>
        </Grid>
        <Filters/>
        <Box sx={{ height: "100", width: '100%' }}>
          {loading && <CircularProgress />}
        </Box>
        {error && (
          <Typography variant="body1" color="error">
            {error.message}
          </Typography>
        )}
        {visibleApplications &&
          visibleApplications.map((application) => (
            <ApplicationItem
              key={application._id}
              application={application}
            />
          ))}
          {visibleApplications &&
            <PaginationComp
            totalItems={userApplications?.length || 0}
            itemsPerPage={itemsPerPage}
            currentPage={currentPage}
            onPageChange={handlePageChange}
          />
          }
          {
            !userApplications?.length &&
            <Box height="100%" display="flex" alignItems="center" justifyContent="center">
              <Typography variant="h5" color="primart" fontFamily="Outfit, sansserif">
                Todavia no tienes postulaciones
              </Typography>
            </Box>
          }
        
      </Container>
    </Box>
    </>
  );
}

En este componente, que seria uno de los que renderiza el outlet, le agregue un bg blue para poder ver la altura del componente, el problema es que por mas de que le ponga la altura 100%, no ocupa todo el espacio entre el footer y el navbar. Todavia puedo ver el bgcolor red del componente box en Root.jsx. Cual puede ser el problema?

Trate de poner la altura al 100% del componente applications.jsx, ya que entiendo que el componente padre, que seria:

<Box component="main" flexGrow={1} id="content" bgcolor="red" >
   <Outlet />
</Box>

ocupa toda la altura entre el footer y el navbar, pero no estoy pudiendo lograr lo esperado y es que el componente que renderize outlet la altura minima deberia ser la altura entre el navbar y el footer.
Ademas si tienen algun feedback para darme extra lo recibire encantado.