使用嵌套表設置flex div的最大高度

Question

嘿，我有一個嵌套在一個表中，它又嵌套在一個div中。我還有另一個應該坐在下面的div。然而這個div似乎坐在桌子的中間。我希望能夠在div或卡上設置最大高度，並讓表格可以滾動。這裏是我的代碼和鏈接到一個plunkr來展示我所經歷的。

HTML：

<div layout="column" style="dislpay: flex;max-height:100px !important"> 
<md-card flex class="white-card" style="max-height:100px !important"> 
    <h3 class="no-margin">Table</h3> 
    <table style="width:100%;max-height:38%" > 
<thead > 
<tr id="stack-list-header"> 
    <th > 
     <span>Name</span> 
     <i class="fa right" ></i> 
    </th> 
    <th > 
     <span>Age</span> 
     <i class="fa right" ></i> 
    </th> 

</tr> 
</thead> 
<tbody > 
    <tr ng-repeat="person in persons track by $index" 
    > 
    <td style="width: 50%">{{person.name}}</td> 
    <td style="width: 50%">{{person.age}}</td> 

</tr> 
</tbody> 
</table> 
</md-card> 



</div> 

<div layout="column" style="dislpay: flex;max-height:100px !important"> 
<md-card flex class="white-card" style="max-height:100px !important"> 
     <h3 class="no-margin">New Div</h3> 
    <p>This should it below the table</p> 
</md-card> 

JS：

function Ctrl($scope) { 

$scope.persons = [ 

    { 
name : "Bob", 
age : "dole" 
    },{ 
name : "Bob", 
age : "dole" 
    },{ 
name : "Bob", 
age : "dole" 
    },{ 
name : "Bob", 
age : "dole" 
    },{ 
name : "Bob", 
age : "dole" 
    },{ 
name : "Bob", 
age : "dole" 
    },{ 
name : "Bob", 
age : "dole" 
    }, 
    ]; 
} 

Plunkr：http://plnkr.co/edit/dbaoz1SjtPQdoCFyZ3xi?p=preview

任何及所有幫助是極大的讚賞。

Answer 1

您必須使用溢出-Y CSS propertie在你列的div像這樣：

<div layout="column" style="display: flex;max-height:100px !important;overflow-y:scroll"> 

的最大高度護理的最大尺寸，如果該列表是更高，它會顯示一個scoll吧。 （btw當心拼寫「dipslay」;））