材料設計sidenav：一個div可以防止正確的彈性

Question

任何人都可以幫助這個codepen基本上，標記的div基本上阻止了一個很好的元素排列？

我想要的是圖像和'應該顯示'的信息是可見的，併爲列表填寫剩餘空間在sidenav。

核心挑戰在於這個html。

<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="sidenav md-sidenav-left md-whiteframe-z2" layout="column"> 
    <header> 
     <img src="https://dl.dropboxusercontent.com/u/240178989/images/artichoke_lg2.png" /> 
    </header> 

    <div class="toolong"> 
     <ul flex> 
     <li ng-repeat="i in series">Entry {{i}}</li> 
     </ul> 
     <h2>Should show</h2> 
    </div> 
    </md-sidenav> 

值得關注的是角材質網站上有我以後的樣子，但我不能將其代碼中發現的線索來解決這個。

Answer 1

使用以下內容似乎是一種工作，你會明白......就是說，如果我正確理解了你的問題。 基本上我在底部h2中添加了一個flex，並添加了溢出：滾動條目div。

<div class="toolong" style="overflow:scroll"> 
    <ul flex> 
    <li ng-repeat="i in series">Entry {{i}}</li> 
    </ul> 
</div> 
<h2 flex>Should show</h2>