Html 具有可滚动内容的角材料md卡

我有一个md卡，它由md头和可滚动的md卡内容组成。随着可滚动内容越来越高，出于某种原因，标题会越来越小。卡片的宽度可能会改变，页眉可能会环绕2或3行，因此页眉上的最小高度不是解决方案。问题存在于最新的IE和Chrome中，而不是FF中

单击“添加5行”按钮几次，可以看到页眉缩小

角材料
长割台长割台长割台长割台长割台长割台长割台长割台长割台长割台



添加5行
var app=角度。模块（'app'，['ngMaterial']）；
应用程序控制器（“ctrl”，函数（$scope）{
$scope.rows=0；
$scope.addRows=函数（）{
$scope.rows+=5；
};
$scope.getArray=function（）{
返回新数组（$scope.rows）；
};
});

您只需将固定高度声明从

md卡

移动到

md内容卡

-

加价

 <md-card style="width: 500px">
   <md-card-header style="border-bottom: 1px solid grey">
       <md-card-header-text>
          <span class="md-title">Long Header Long Header Long Header Long Header Long Header Long Header Long Header Long Header </span>
       </md-card-header-text>
   </md-card-header>
   <md-content-card style="height: 200px; overflow-y: auto" >
     <ul>
       <li ng-repeat="x in getArray() track by $index"></li>
     </ul>

   </md-content-card>
 </md-card>

长割台长割台长割台长割台长割台长割台长割台长割台长割台长割台

 <md-card style="width: 500px">
   <md-card-header style="border-bottom: 1px solid grey">
       <md-card-header-text>
          <span class="md-title">Long Header Long Header Long Header Long Header Long Header Long Header Long Header Long Header </span>
       </md-card-header-text>
   </md-card-header>
   <md-content-card style="height: 200px; overflow-y: auto" >
     <ul>
       <li ng-repeat="x in getArray() track by $index"></li>
     </ul>

   </md-content-card>
 </md-card>