如何让Angular Material的textarea在Flexbox中自适应可用空间？

要实现Textarea根据所在容器的可用空间动态拉伸高度（而非随输入内容扩展），可以通过CSS Flex布局结合Angular Material的样式调整来实现，具体步骤如下：

1. 修改HTML结构 #

给外层form添加容器类，方便统一控制布局：

<form class="textarea-container">
  <mat-form-field class="example-full-width flex-grow">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>

  <mat-form-field class="example-full-width flex-grow">
    <mat-label>Leave a comment</mat-label>
    <textarea matInput placeholder="Ex. It makes me feel..."></textarea>
  </mat-form-field>
</form>

2. 添加CSS样式 #

通过Flex布局让两个输入区域平分容器高度，并强制Textarea撑满所在的mat-form-field空间：

/* 外层容器设置flex布局，指定高度（这里用视口高度，可根据实际场景调整） */
.textarea-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
}

/* 让每个mat-form-field占满可用空间 */
.flex-grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 调整mat-form-field内部结构，让输入区域撑满 */
.flex-grow .mat-mdc-form-field-flex {
  flex: 1;
}

/* 强制textarea占满高度，可选禁用手动调整大小 */
.flex-grow textarea {
  height: 100%;
  resize: none;
}

关键说明 #

• 外层容器的height可根据实际需求修改（比如父组件的高度），100vh是让容器占满整个视口高度；
• flex: 1会让两个mat-form-field平分容器的可用空间，实现动态适配；
• 调整mat-mdc-form-field-flex的flex属性是为了覆盖Angular Material默认的内部布局，确保输入区域能撑满mat-form-field的高度；
• resize: none可选，用于禁止用户手动拖动调整Textarea大小，保持布局一致性。

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