Problem mit verschachteltem Flex-Layout unter Verwendung von Schrägmaterial-Kurzschrift

Question

Es fällt mir schwer zu sagen, was mit dem folgenden Layout nicht stimmt.

Ich versuche, ein SPA-Layout mit dem „tiefsten“ Komponente scrollbaren ist nur zu halten, wenn die VH zu klein (im Snippet mit overflow-y:scroll und border: 3px solid black markiert) ist, sollten die Eltern divs ohnehin die Darstellungsgrenzen folgen.

http://codepen.io/minikrob/pen/yJKzKj
Beispiel: http://i.imgur.com/zq0tbx5.png

Hat jemand eine Idee hat, wie dies zu erreichen?

Edit: Es war ein Problem mit einer älteren Version von Google Chrome ... Danke nochmal an @kuhnroyal & @Chanthu!

Answer 1

Wenn der innere Behälter mit dem schwarzen Rand ist, die Sie blättern wollte, haben einen Blick auf diese: http://codepen.io/anon/pen/Wxzkmr

Das Update war height:100%; auf Elemente hinzufügen .pusher und #content-wrapper.

Wie wird das behoben? hmm ... css ist komisch.

Answer 2

Sie sollten das Winkelmaterial layout="column|row für die Eltern und md-content für das scrollbare Element verwenden.

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

Hier ist ein funktionierendes Stift: http://codepen.io/kuhnroyal/pen/QEmOvk

Und Sie sollten https://material.angularjs.org/latest/layout/container