如何减小<mat-sidenav-content>的宽度？

要减小<mat-sidenav-content>的宽度，可以通过以下几种方式实现：

1. 使用CSS样式：可以通过在<mat-sidenav-content>元素上添加自定义的CSS类，并设置其宽度属性来减小宽度。例如，可以使用以下CSS代码将宽度设置为50%：

.custom-width {
  width: 50%;
}

然后，在<mat-sidenav-content>元素上添加该类：

<mat-sidenav-content class="custom-width">
  <!-- 内容 -->
</mat-sidenav-content>

1. 使用Angular Material提供的API：如果你正在使用Angular Material库，可以使用它提供的API来控制<mat-sidenav-content>的宽度。例如，可以使用MatSidenavContent组件的属性style.width来设置宽度。在组件的代码中，可以通过以下方式减小宽度：

<mat-sidenav-content [style.width]="customWidth">
  <!-- 内容 -->
</mat-sidenav-content>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  customWidth = '50%';
}

1. 使用响应式布局：如果你希望根据屏幕大小自动调整<mat-sidenav-content>的宽度，可以使用响应式布局。Angular Flex-Layout库是一个流行的选择，它提供了丰富的响应式布局功能。你可以使用Flex-Layout的API来定义不同屏幕尺寸下<mat-sidenav-content>的宽度。具体使用方法可以参考Flex-Layout的文档。

以上是几种常见的减小<mat-sidenav-content>宽度的方法。根据具体的需求和技术栈选择适合的方式进行调整。