Minikrob Minikrob - 4 months ago 56
CSS Question

Issue with nested flex layout using angular-material shorthand

I'm having a hard time telling what's wrong with the following layout.

I'm trying to keep a SPA layout with the "deepest" component only being scrollable if the VH is too small (marked in the snippet with

overflow-y:scroll
and
border: 3px solid black
), the parent divs should follow the viewport boundaries anyway.

http://codepen.io/minikrob/pen/yJKzKj

Example : http://i.imgur.com/zq0tbx5.png

Does anyone have an idea on how to achieve this ?

Edit: It was an issue with an older version of Google Chrome... thanks again to @kuhnroyal !

Answer

You should use the angular-material layout="column|row on the parents and md-content for the scrollable element.

<div flex="" class="maincontent pushable" layout="column">
  <div flex="" class="pusher" layout="column">
    <!-- ngView: content-wrapper -->
    <md-content id="content-wrapper" flex="">

Here is a working pen: http://codepen.io/kuhnroyal/pen/QEmOvk

And you should read https://material.angularjs.org/latest/layout/container