我之前也碰到过完全一样的需求，Angular Material默认的mat-drawer-container/mat-sidenav-container确实是跟着内容区高度走的，抽屉会被强制拉伸到容器高度，要实现你要的「抽屉自适应自身内容，容器取两者较高值」的效果，得结合CSS调整和一点点组件逻辑来搞定，直接用官方配置确实满足不了。

核心思路拆解 #

首先得打破默认的flex布局拉伸行为：

1. 让抽屉不再被容器强制拉伸，而是根据自身内容计算高度
2. 让容器的高度由抽屉和内容区中最高的那个来决定
3. 适配抽屉内容动态变化的场景

具体实现步骤 #

1. CSS样式调整（关键）

覆盖默认的Material样式，修改容器和抽屉的布局行为：

/* 调整容器的高度计算方式 */
.mat-drawer-container {
  min-height: auto !important; /* 覆盖默认的100%/100vh设置 */
  height: fit-content; /* 让容器高度自适应子元素的最大高度 */
  display: flex;
  border: 1px solid #e0e0e0; /* 可选，方便直观看到容器范围 */
}

/* 让抽屉自适应自身内容，不被容器拉伸 */
.mat-drawer {
  align-self: flex-start; /* 取消flex布局下的默认拉伸行为 */
  min-width: 220px; /* 可选，给抽屉设置一个最小宽度，避免太窄 */
}

/* 内容区保持填充，但允许内部滚动（如果内容过多） */
.mat-drawer-content {
  flex: 1; /* 让内容区占据容器剩余宽度 */
  overflow: auto; /* 内容超出时显示内部滚动条，不影响容器高度 */
  padding: 16px; /* 可选，添加内边距优化排版 */
}

2. 适配动态内容变化

因为你的抽屉内容会根据用户输入动态更新，有时候Angular的变更检测可能不会立刻触发容器高度重计算，这时候可以在内容更新后手动触发变更检测：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  drawerItems: string[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  // 模拟用户添加抽屉内容的操作
  addDrawerItem() {
    this.drawerItems.push(`新条目 ${this.drawerItems.length + 1}`);
    // 内容更新后手动触发变更检测，确保容器高度重新计算
    this.cdr.detectChanges();
  }
}

为什么之前的方案不行？ #

• height:100vh：这个值是取视口高度，不管内容实际高度，所以会出现多余滚动条，不符合自适应需求
• Host设置mat-drawer-container高度：Material的容器默认有内部布局逻辑，直接设置fit-content或百分比值会被默认样式覆盖，需要用!important或者更高优先级的选择器覆盖
• MAT_DRAWER_DEFAULT_AUTOSIZE：这个配置是用来让抽屉展开/收起时自动调整容器宽度的，和高度自适应完全无关，所以抽屉内容存在但内容区为空时，容器还是会跟着内容区的高度走，导致抽屉显示不全

额外优化点 #

如果你的内容区可能出现空内容的情况，可以给内容区设置一个最小高度，避免容器太窄：

.mat-drawer-content {
  flex: 1;
  overflow: auto;
  min-height: 200px; /* 内容区为空时的最小高度 */
}

这样不管抽屉还是内容区哪个为空，容器都能保持合理的高度。

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