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

Answer 2

The solution provided by @dinamix works well. So, I would explain the reason behind this issue.

The issue you are hitting is expected due to the obvious reason that you have given flex attribute to router-outlet. And hence router-outlet is occupying all the space left(width here).

This confusion should disappear if one understands that Angular does not replace the router-outlet with the component corresponding to the route. Rather, it appends the component next to the router-outlet.

So, by wrapping the router-outlet in a container and setting flex on that will leave the router-outlet untouched, and the flex effect will be visible to its sibling(Vendor-form in your example) appended by angular.