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

Question

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

当 md-content 仅嵌套在一个 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 嵌套在两个或更多 div 下，这会破坏布局并导致内容溢出并导致整个页面可滚动。

示例 (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？

Answer 1

这是的一个例子。也只需在外部元素上使用 md-content 而不是 div。

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

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

Angular Material nested layouts breaks md-content scrolling

flexbox

angular-material