flex layout (flexbox) with angular router outlet

Question

I am trying to place 2 elements next to each other where one is takes 25% of the screen and the other is an angular router outlet which takes up the rest of the container. Using the following ends up with both elements on either side of the screen with space in the middle. The ** portion is the one in question

  <div class="container"
         fxLayout>
    <admin-route-menu fxFlex="25%" fxShow.lt-sm="false"></admin-route-menu>
    <router-outlet fxFlex></router-outlet>
  </div>

comes out looking like

The admin-route-menu tag on the left is just basic html and css where the html has a mat-list in it. The router-outlet can take on any element as per angular specs. I can include the admin-route-menu if that is also helpful.

I also tried with regular flex boxes but the result is the same.

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .wrapper-left
{
  background: #fcc;
}
.wrapper > .wrapper-right
{
  background: #ccf;
  flex: 1;
}

Any help is appreciated, thanks

Answer 1

For anyone having a similar issue the problem was solved by doing

<div class="container"
         fxLayout>
    <div fxFlex="25%" fxShow.lt-sm="false">
      <admin-route-menu></admin-route-menu>
    </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  </div>

Basically always use divs with the angular flex layout module as some custom elements dont play nice with it, like the router outlet