1

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?

user1027169
  • 2,627
  • 3
  • 27
  • 50

1 Answers1

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

Community
  • 1
  • 1
kuhnroyal
  • 7,188
  • 1
  • 34
  • 47