Css 如何改变角材料中垫板的尺寸

我希望两个组件具有相同的高度（左窗体的大小）尝试边距，不填充任何内容

下面是其父元素HTML的代码

<mat-tab label="Update Profile">

    <div class="container">
      <mat-card class="mat-card-container">
      <div class="vertical-center row" >

        <div class="col-lg-1">
        </div>

        <div class="col-lg-6">
          <app-register [user]="user"></app-register>
        </div>

        <div class="col-lg-4 password-change-form">
          <app-password-change [id]="user.id"></app-password-change>
        </div>



        <div class="col-lg-1">
        </div>

      </div>
      </mat-card>
    </div>
  </mat-tab>

---

问题不在于mat卡，而在于div密码更改表单（如果您要求将其设置为相同高度）：

.password-change-form{
   height:100%
}

但是，如果您希望它们具有相同的宽度，那么您可能应该将col-lg-5添加到它们中，而不是添加到6和4中

    <div class="col-lg-5">
      <app-register [user]="user"></app-register>
    </div>

    <div class="col-lg-5 password-change-form">
      <app-password-change [id]="user.id"></app-password-change>
    </div>

---

您可以更好地使用

柔性布局

。请参阅：

[https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API][1] 

---

设置

fxFlexAlign=“stretch”

使所有mat卡处于相同的高度。

相同的高度，您的解决方案不起作用，但谢谢，mat卡是否在应用程序密码更改组件中？如果是，请尝试将其放入组件的css文件

mat卡{宽度：calc（100%-70px）；高度：calc（100%-70px）；}

    <div class="col-lg-5">
      <app-register [user]="user"></app-register>
    </div>

    <div class="col-lg-5 password-change-form">
      <app-password-change [id]="user.id"></app-password-change>
    </div>