Angular Material v16 mat-card布局失效求助：头部与内容无法并排

原本使用Angular Material Card组件时，头部垂直显示在左侧、内容区域在右侧。但升级Angular及Angular Material至16版本后，头部与内容变为上下堆叠显示。

原HTML代码：

<mat-card>
    <mat-card-header>
        Vertical Title
    </mat-card-header>
    <mat-card-content>
        <p>
            Lorem ipsum ...
        </p>
    </mat-card-content>
</mat-card>

原CSS代码：

mat-card {
    width: 50%;
    display: flex;
}

mat-card-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    text-align: center;
}

mat-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

该问题已通过示例复现，需解决头部与内容左右并排显示的需求。

解决方案 #

Angular Material 16对mat-card的默认布局样式做了调整，将内部flex方向默认设置为column，导致原有的flex布局被覆盖。可通过以下CSS修改恢复预期布局：

1. 强制设置mat-card的flex方向为横向，确保样式优先级足够：

mat-card {
    width: 50%;
    display: flex;
    flex-direction: row !important;
}

2. 调整mat-card-header的宽度与内边距，优化垂直文本的显示空间：

mat-card-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    text-align: center;
    width: auto;
    padding: 1rem;
}

3. 让mat-card-content占据卡片剩余宽度，避免内容收缩：

mat-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 1rem;
}

修改后即可恢复头部垂直显示在左侧、内容区域在右侧的并排布局。

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