flex layout (flexbox) with angular router outlet

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

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.