如何更改选项卡Angular Material Design的高度

Question

我正在尝试使用Angular2和Angular Material完成一个简单的布局。这就是这个想法：

<div class="viewport-home">
  <md-toolbar color="primary">
    <span class="toolbar-title">{{'app.name' | translate}}</span>
    <button md-icon-button [md-menu-trigger-for]="menu">
      <md-icon>more_vert</md-icon>
    </button>
  </md-toolbar>
  <md-menu x-position="before" #menu="mdMenu">
      <button md-menu-item>{{'home.menu.logout.label' | translate}}</button>
  </md-menu>
  <md-tab-group md-stretch-tabs="always" md-dynamic-height>
    <md-tab label="{{'home.tab-design.label' | translate}}">
      <design></design>
    </md-tab>
    <md-tab label="{{'home.tab-gallery.label' | translate}}">

    </md-tab>
    <md-tab label="{{'home.tab-suggestions.label' | translate}}">

    </md-tab>
  </md-tab-group>
</div>

我唯一的问题是我想设置选项卡的高度以使用flex填充视口的高度，但是，我不应该在CSS中修改哪个类或指令。当我检查Chrome的devtools中的代码时，我看到很多嵌套元素，我不知道该怎么做。

我很感激任何帮助。感谢。