flexbox - Angular Material nested layouts breaks md-content scrolling -


i make layout toolbar fixed on top, 2 side-by-side content scrollable sections on bottom.

i can correctly create layout when md-contents nested under 1 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 nested md-content under 2 or more divs breaks layout , causes content overflow out , causes entire page 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 create scrollable md-content when inside nested layout?

this case of https://stackoverflow.com/a/29516060/2553215. use md-content instead of div on outer elements well.

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


Comments

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

SVG stroke-linecap doesn't work for circles in Firefox? -

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -