带角形路由器插座的Flex布局（flexbox）

Question

我试图将2个元素彼此相邻放置，其中一个占据屏幕的25％，另一个是有角的router缝机出口，该出口占据了容器的其余部分。使用以下内容时，两个元素都位于屏幕的两侧，中间有空格。**部分是有问题的部分

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

看起来像

左侧的admin-route-menu标签只是基本的html和css，其中html中有一个mat-list。路由器插座可以根据角度规格采用任何元素。如果有帮助的话，我可以加入admin-route-menu。

我也尝试使用常规的柔韧性盒，但是结果是一样的。

.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;
}

任何帮助表示赞赏，谢谢

Answer 1

对于任何有类似问题的人，通过

<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>

基本上，始终将div与angular flex布局模块一起使用，因为某些自定义元素不能很好地配合它，例如路由器插座