javascript - Angular 路由器导出冷却不占据所有宽度

Question

我的组件中有一个路由器 socket 。子组件不占据整个宽度。我尝试给 child 的 div width:100%，min-width:100%，也加上 !important，但它不起作用。如何强制 child 的 div 占据整个可用宽度？ 父 HTML:

<div fxLayout="column" fxLayoutAlign="space-between stretch">
    <div>
          ...
    </div>

    <div fxLayout="row" fxFlexFill>
        <div class="navbar" fxLayout="column">
        </div>
        <div class="mainDiv" fxFlex>
            <router-outlet></router-outlet>
        </div>
    </div>

    <div fxLayoutAlign="end"></div>
</div>

父 CSS:

.navbar {
    padding-top: 40px;
    padding-right: 80px;
    border-top: none;
}

.mainDiv {
    width: 100%;
    border-top: none;
}

子CSS:

<div class="container">...</div>

Answer 1

尝试在 div 内设置路由器 socket 而不使用 flex:

<div style="width: 100%;height: 100%">
<router-outlet ></router-outlet>
  </div>