Angular Material nested layouts breaks md-content scrolling

Question

I would like to make a layout with a toolbar fixed on top, with two side-by-side content scrollable sections on the bottom.

I can correctly create this layout when the md-contents are only nested under one div.

Example (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">

However, if I nested md-content under two or more divs this breaks the layout and causes the content to overflow out and causes the entire page to be scrollable.

Example (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">

What's going on? How can I create a scrollable md-content when it is inside a nested layout?

score 0 · Accepted Answer · edited May 23 '17 at 12:34

0

This is a case of https://stackoverflow.com/a/29516060/2553215. Just use md-content instead of div on the outer elements as well.

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

edited May 23 '17 at 12:34

Community

1
1

answered Jan 24 '16 at 13:17

kuhnroyal

7,188
1
34
47

Angular Material nested layouts breaks md-content scrolling

1 Answers1