2015-05-13 45 views
-1

嘿,我有一个嵌套在一个表中,它又嵌套在一个div中。我还有另一个应该坐在下面的div。然而这个div似乎坐在桌子的中间。我希望能够在div或卡上设置最大高度,并让表格可以滚动。这里是我的代码和链接到一个plunkr来展示我所经历的。使用嵌套表设置flex div的最大高度

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

任何及所有帮助是极大的赞赏。

回答

0

您必须使用溢出-Y CSS propertie在你列的div像这样:

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

的最大高度护理的最大尺寸,如果该列表是更高,它会显示一个scoll吧。 (btw当心拼写“dipslay”;))