如何让MatToolbarRow在MatToolbar组件中占满全屏宽度？

我使用Angular Material的MatToolbar组件，内部包含两个MatToolbarRow：一个用于放置需要全屏显示的标题，另一个承载应用导航按钮。但目前MatToolbarRow无法在MatToolbar组件中占满宽度，同时我还希望它能撑满父容器的高度。

当前渲染状态 #

第一行的黑色标题区域仅左对齐，未铺满整个工具栏宽度；第二行的导航按钮也只占用自身内容所需宽度，未撑满工具栏。通过浏览器开发者工具可见，两行MatToolbarRow都仅适配内容宽度，未填充父容器。

代码结构 #

根组件AppComponent的HTML #

<app-nav-menu></app-nav-menu>
<div class="container">
    <router-outlet></router-outlet>
</div>

AppComponent的CSS #

.container {
   padding: 20px 10px 20px 10px;
}

NavMenuComponent的HTML #

<header>
    <mat-toolbar color="primary">
        <mat-toolbar-row class="matToolbar-header-title">
            <app-header></app-header>
        </mat-toolbar-row>
        <mat-toolbar-row>
            <a mat-icon-button [routerLink]="['/']">
                <mat-icon>
                   home
                </mat-icon>
            </a>
            <a mat-flat-button [routerLink]="['/vehicles']">
                Vehicles
            </a>
        </mat-toolbar-row>
  </mat-toolbar>
</header>

NavMenuComponent的SCSS #

.matToolbar-header-title {
   padding: 0px;
 }

HeaderComponent的HTML #

<div class="header-title">
    Fred's Cars, Trucks & Jeeps
</div>

HeaderComponent的CSS #

.header-title {
   background-color: black;
}

期望效果 #

标题行的黑色背景铺满整个工具栏宽度，同时两行MatToolbarRow都能撑满MatToolbar的高度。

解决方案 #

1. 让MatToolbarRow占满宽度 #

MatToolbar默认是Flex容器，MatToolbarRow默认flex属性未设置为占满剩余空间。添加以下样式：

// 全局生效所有MatToolbarRow
mat-toolbar-row {
  width: 100%;
  flex: 1 1 100%;
}

// 仅针对标题行生效
.matToolbar-header-title {
  padding: 0;
  width: 100%;
  flex: 1 1 100%;
}

2. 让标题区域铺满行 #

<app-header>默认是行内元素，需让它和内部标题容器都占满父容器：

// 在header.component.css中添加
.header-title {
  background-color: black;
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
}

// 在nav-menu.component.scss中添加
.matToolbar-header-title app-header {
  width: 100%;
}

3. 让MatToolbarRow撑满父容器高度 #

调整MatToolbar的Flex布局方向为列，设置每行的flex属性分配高度：

mat-toolbar {
  display: flex;
  flex-direction: column;
  min-height: 80px; // 可根据需求自定义高度
}

mat-toolbar-row {
  flex: 1; // 让两行平分高度，若需某行更高可调整值，比如标题行设为flex:2
}

内容的提问来源于stack exchange，提问作者Sam