我之前遇到过这种情况,只是强迫它与一堆自定义css一起使用,但这似乎很草率。这似乎完全倒退到我期望它如何工作。内容应该弯曲以匹配高度,而不是标题。除了自定义CSS之外,有关如何修复此问题的任何想法?是否有"角材料"修复它的方法?
<div layout-gt-sm="row" flex="1">
<md-card ng-show="!trackingStored.loading" flex="20">
<md-card-title>
<md-card-title-text layout-align="center center">
<span class="md-headline"> General </span>
</md-card-title-text>
</md-card-title>
<md-divider style="width:100%;"></md-divider>
<md-card-content layout="column" layout-align="center center" flex = "1">
<dl>
<dt ng-show="trackingStored.VehicleStatus">Status</dt>
<dd ng-show="trackingStored.VehicleStatus">{{trackingStored.trackingInfo.VehicleStatus}}</dd>
<dt>Location</dt>
<dd>{{trackingStored.trackingInfo.ConfirmationNumber}}</dd>
<dt>Year</dt>
<dd>{{trackingStored.trackingInfo.VehicleYear}}</dd>
<dt>Make</dt>
<dd>{{trackingStored.trackingInfo.VehicleMake}}</dd>
<dt>Model</dt>
<dd>{{trackingStored.trackingInfo.VehicleModel}}</dd>
<dt>VIN</dt>
<dd>{{trackingStored.trackingInfo.VehicleVIN}}</dd>
<dt ng-show="trackingStored.trackingInfo.DropOffDate.HasValue">Dropped off</dt>
<dd ng-show="trackingStored.trackingInfo.DropOffDate.HasValue">{{trackingStored.trackingInfo.DropOffDate.Value}}</dd>
</dl>
</md-card-content>
</md-card>
<md-card ng-show="trackingStored.trackingInfo.RecentHistory != null && trackingStored.trackingInfo.RecentHistory.length > 0"
flex="80">
<md-card-title >
<md-card-title-text layout-align="center center">
<span class="md-headline"> Maintenance History </span>
</md-card-title-text>
</md-card-title>
<md-divider style="width:100%;"></md-divider>
<md-card-content>
<h4>(12 most recent entries)</h4>
<div layout-gt-xs="row" layout-wrap layout-align="space-between center">
<div ng-repeat="item in trackingStored.trackingInfo.RecentHistory track by $index" flex="50" flex-xs="100" style="width:100%;">
<md-card>
<md-card-title class="customCardHeader">
<md-card-title-text>
<span class="md-headline customCardHeaderText"> {{item.CompletedDate | date: trackingStored.dateFormat}} </span>
</md-card-title-text>
</md-card-title>
<md-divider> </md-divider>
<md-card-content>
<div>{{item.Comments}}</div>
</md-card-content>
</md-card>
</div>
</div>
</md-card-content>
</md-card>