textarea首次加载自动收缩，刷新后恢复正常的问题求助

收缩状态：textarea被挤压成窄条，仅能看到极小的宽度
正常状态：textarea占满容器剩余宽度，显示正常

HTML代码 #

<div class="col-md-12 input-group pab pcomment">
        <div class="input-group-prepend">
          <span class="input-group-text">Comment</span>
        </div>
        <textarea matinput formControlName="pastMedicalHistoryComment" class="form-control" aria-label="Comment"></textarea>
    </div>

相关CSS代码 #

.input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

原因分析 #

• 你设置的width: 1%结合flex: 1 1 auto，在页面初始渲染时，Angular Material的matinput指令加载延迟，导致Flexbox布局计算异常，textarea被过度挤压。
• Angular组件初始化顺序问题：matinput指令在Flexbox布局完成后才初始化，初始布局阶段textarea未正确继承Flex属性的自适应行为，刷新后组件已加载完成，布局恢复正常。
• Bootstrap的input-group组件与Angular Material的matinput存在样式初始化时机不匹配的冲突。

解决方案 #

方案一：添加最小宽度限制 #

给textarea设置最小宽度，防止被过度挤压：

.input-group > .form-control.mat-input-element {
    min-width: 250px; /* 根据实际需求调整数值 */
}

方案二：调整Flex布局属性 #

修改form-control的Flex和width属性，确保初始渲染时宽度计算正确：

.input-group > .form-control {
    flex-basis: auto;
    width: auto;
}

方案三：手动触发视图重绘 #

利用Angular的AfterViewInit钩子，在视图初始化后强制触发一次布局重绘：

1. 组件类代码：

import { AfterViewInit, ElementRef, ViewChild } from '@angular/core';

export class YourComponent implements AfterViewInit {
    @ViewChild('commentTextarea') commentTextarea!: ElementRef;

    ngAfterViewInit(): void {
        // 通过短暂隐藏再显示触发重绘
        const textarea = this.commentTextarea.nativeElement;
        textarea.style.display = 'none';
        setTimeout(() => {
            textarea.style.display = '';
        }, 0);
    }
}

2. 修改HTML，添加模板引用：

<textarea #commentTextarea matinput formControlName="pastMedicalHistoryComment" class="form-control" aria-label="Comment"></textarea>

方案四：移除matinput指令 #

如果不需要Angular Material的input增强功能，直接使用原生textarea绑定表单控件：

<textarea formControlName="pastMedicalHistoryComment" class="form-control" aria-label="Comment"></textarea>

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