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.