使用角度材料速记的嵌套弹性布局问题答案

【问题标题】：Issue with nested flex layout using angular-material shorthand使用角度材料速记的嵌套弹性布局问题
【发布时间】：2016-07-21 22:22:51
【问题描述】：

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

我试图保持一个 SPA 布局，只有当 VH 太小时（在 sn-p 中用overflow-y:scroll 和 border: 3px solid black 标记）时，“最深”组件才可滚动，父 div 应该遵循无论如何，视口边界。

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

有人知道如何实现这一目标吗？

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

【问题讨论】：

标签： css angularjs layout flexbox angular-material

【解决方案1】：

如果带有黑色边框的内部容器是您要滚动的内容，请查看：http://codepen.io/anon/pen/Wxzkmr

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

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

【讨论】：

【解决方案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

【讨论】：

感谢 kuhnroyal 和 Chanthu 的回答，我需要的是： - 将绿色边框 div 弹性收缩到橙色边框中- 黑色边框包含在绿色边框内，包括边距这是我想要实现的示例：i.imgur.com/zq0tbx5.png
据我所知，这正是笔的行为。
好的，感谢您的坚持，问题似乎来自 Chrome，因为您的笔在 FF 上有效工作...现在找到根本问题...再次感谢！
它在 FF 和 Chrome 中对我来说是一样的。您使用的是哪个版本的 Chrome？我已经 53 岁了。
再次感谢，这确实是我的 Chrome 版本（以前是 48）的问题！