CSS flex item always in the middle independently from how many other elements are on its side and their size, without position absolute?

Question

I'm attaching an image to represent what the expected result is:

There could be elements both on the left and right side of the middle section, as well as there might be none, and their size is not known a priori. I need not to use absolute positioning because other elements' position rely on the central section to be part of the HTML flow, like the top navbar. Here is a sketch of my current structure

#appContainer {
  

display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#mainContainer {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#sideNavWrapper, #mainWrapper, #asideWrapper{
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #E2E8F0;
}

#sideNavWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 0px;
}

#mainWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  width: 612px;
}

#asideWrapper {
  border-left: 0px;
}

#topNav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 1px solid #E2E8F0;
  width: 612px;
}

<div role="presentation" id="appContainer">
  

<nav id="topNav">
   { topNav }
    <!-- some complicated logic here, irrelevant -->
  </nav>
  <div height="100%" role="presentation" id="mainContainer" >
    <!-- If a left navigation is present -->
    <aside id="sideNavWrapper" >
      { optional sideNav }
    </aside>
    <main id="mainWrapper">
      { main }
    </main>
    <aside id="asideWrapper">
       {optional aside}
    </aside>
  </div>
</div>