Angular Material 嵌套布局会破坏 md-content 滚动答案

【问题标题】：Angular Material nested layouts breaks md-content scrollingAngular Material 嵌套布局会破坏 md-content 滚动
【发布时间】：2016-01-24 21:17:28
【问题描述】：

我想制作一个顶部固定工具栏的布局，底部有两个并排的内容可滚动部分。

当md-contents 仅嵌套在一个div 下时，我可以正确创建此布局。

示例 (CodePen)：

<body ng-app="app" layout="column">
  <md-toolbar class="md-whiteframe-z4">Toolbar</md-toolbar>

  <div layout="column" flex>
    <md-content layout flex>
      <md-content flex="50" layout="column">
      <md-content flex="50" layout="column">

但是，如果我将 md-content 嵌套在两个或更多 divs 下，则会破坏布局并导致内容溢出并导致整个页面可滚动。

示例 (CodePen)：

<body ng-app="app" layout="column">
  <md-toolbar class="md-whiteframe-z4">Toolbar</md-toolbar>

  <div layout="column" flex>
    <div layout="column" flex>
      <md-content layout flex>
        <md-content flex="50" layout="column">
        <md-content flex="50" layout="column">

发生了什么事？当 md-content 在嵌套布局中时，如何创建可滚动的 md-content？

【问题讨论】：

标签： flexbox angular-material

【解决方案1】：

这是https://stackoverflow.com/a/29516060/2553215 的情况。只需在外部元素上使用md-content 而不是div。

http://codepen.io/kuhnroyal/pen/EPQeZd

【讨论】：