Minikrob Minikrob - 9 months ago 108
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

border: 3px solid black
), the parent divs should follow the viewport boundaries anyway.

Example :

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 !


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:

And you should read