angular - 带 Angular 路由器导出的柔性布局(柔性盒)

Question

我试图将 2 个元素并排放置，其中一个占屏幕的 25%，另一个是一个 Angular 路由器导出，它占据了容器的其余部分。使用以下代码最终会在屏幕两侧出现两个元素，中间有空格。 ** 部分是有问题的

  <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。路由器 socket 可以根据 Angular 规范采用任何元素。如果这也有帮助，我可以包括 admin-route-menu。

我也尝试过使用常规的 flex 盒子，但结果是一样的。

.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 布局模块一起使用，因为一些自定义元素不能很好地配合它，比如路由器 socket