Angular mat-tab 高度自适应与布局优化指南

.left-wrapper {
    flex-basis: 44%;
    display: flex;
    flex-direction: column;
    height: 37rem; /* 父容器的固定高度 */

    /* 使用 ::ng-deep 穿透组件封装，修改内部元素样式 */
    ::ng-deep .mat-tab-body-wrapper {
        height: 100%; /* 让 wrapper 填充父容器的剩余高度 */
        /* 如果父容器高度是固定的，也可以直接使用固定值，例如 height: 37rem; */
    }

    ::ng-deep .mat-tab-body.mat-tab-body-active {
        height: 100%; /* 让激活的 tab body 填充其 wrapper 的高度 */
        /* 同样，如果父容器高度是固定的，也可以直接使用固定值，例如 height: 37rem; */
    }
}

<div class="left-wrapper">
    <mat-tab-group selectedIndex="0">
        <mat-tab label="全部">
            <ng-template matTabContent>
                <div class="tab-content">
                    <p>这是“全部”标签页的内容。</p>
                    <p>它应该填充整个可用高度。</p>
                    <div style="height: 200px; background-color: #f0f0f0;">
                        <!-- 示例内容，模拟实际组件 -->
                        Count All Component
                    </div>
                </div>
            </ng-template>
        </mat-tab>
        <mat-tab label="汇总">
            <ng-template matTabContent>
                <div class="tab-content">
                    <p>这是“汇总”标签页的内容。</p>
                    <p>同样应该填充高度。</p>
                    <div style="height: 250px; background-color: #e0e0e0;">
                        <!-- 示例内容，模拟实际组件 -->
                        Count Sum Component
                    </div>
                </div>
            </ng-template>
        </mat-tab>
    </mat-tab-group>
</div>

.left-wrapper {
    width: 400px; /* 示例宽度 */
    height: 37rem; /* 固定高度 */
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc; /* 方便观察边界 */
    box-sizing: border-box; /* 确保边框不增加总尺寸 */

    /* 确保 mat-tab-group 本身也填充父容器高度 */
    mat-tab-group {
        flex-grow: 1; /* 让 mat-tab-group 填充剩余空间 */
        display: flex;
        flex-direction: column; /* 使其内部的 header 和 body 垂直排列 */
    }

    /* 确保 mat-tab-header 不占据所有空间，让 body 填充 */
    ::ng-deep .mat-tab-header {
        flex-shrink: 0; /* 阻止 header 缩小 */
    }

    /* 关键样式：深度选择器 */
    ::ng-deep .mat-tab-body-wrapper {
        flex-grow: 1; /* 让 wrapper 填充 mat-tab-group 的剩余空间 */
        display: flex; /* 使其内部的 body 能够填充 */
        flex-direction: column; /* 确保内部布局正确 */
        overflow: auto; /* 如果内容溢出，允许滚动 */
    }

    ::ng-deep .mat-tab-body.mat-tab-body-active {
        flex-grow: 1; /* 让激活的 tab body 填充其 wrapper 的剩余空间 */
        display: flex; /* 确保其内部内容能够填充 */
        flex-direction: column;
    }

    /* 示例内容区域，确保它能填充其父 mat-tab-body */
    .tab-content {
        flex-grow: 1; /* 让实际内容填充 tab-body 的剩余空间 */
        padding: 16px;
        background-color: #f9f9f9;
        overflow: auto; /* 如果内容溢出，允许滚动 */
    }
}