使用 angular-material shorthand 的嵌套弹性布局问题

Question

我很难说出以下布局有什么问题。

我试图保持 SPA 布局，其中 "deepest" 组件仅在 VH 太小时才可滚动（在片段中用 overflow-y:scroll 和 border: 3px solid black 标记），无论如何，父 div 应该遵循视口边界。

http://codepen.io/minikrob/pen/yJKzKj
示例：http://i.imgur.com/zq0tbx5.png

有人知道如何实现吗？

编辑：这是旧版本 Google Chrome 的问题...再次感谢@kuhnroyal 和@Chanthu ！

Answer 1

如果黑色边框的内部容器是你想要滚动的那个，看看这个：http://codepen.io/anon/pen/Wxzkmr

修复方法是将 height:100%; 添加到元素 .pusher 和 #content-wrapper。

如何解决？嗯... css 很奇怪。

Answer 2

您应该在父元素上使用 angular-material layout="column|row，在可滚动元素上使用 md-content。

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

这是一支工作笔：http://codepen.io/kuhnroyal/pen/QEmOvk

你应该阅读 https://material.angularjs.org/latest/layout/container

使用 angular-material shorthand 的嵌套弹性布局问题

Issue with nested flex layout using angular-material shorthand

css

layout

flexbox

angularjs

angular-material