Material design sidenav：一个 div 阻止了正确的 flex

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>

值得注意的是，Angular Material 网站具有我所追求的外观，但我在他们的代码中找不到解决此问题的线索。

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>