Angular-material：限制 md-content 高度答案

【问题标题】：Angular-material: limit md-content heightAngular-material：限制 md-content 高度
【发布时间】：2016-08-12 01:00:01
【问题描述】：

我一直在努力解决有关 angular-material 的一些集成问题。

在下面的代码示例中，我试图通过添加 @987654324 来强制 orange div 和 blue div 具有相同的高度@。但是，包含大文本的 blue div 的 md-content 子元素的高度会增加，但它应该保持不变并在其范围内滚动。

http://codepen.io/anon/pen/oxyBMJ

如何强制md-content 元素的高度不增加，无论其内容的长度如何？

感谢您的帮助

【问题讨论】：

这是工作，所以..蓝色 div 孩子有滚动，而不是增加高度或细化你的问题
但我希望橙色和蓝色 div 保持相同的高度。因为在这种情况下，如果我向md-content 添加更多内容，当我希望它保持相同的高度并滚动时，turqoise div 的高度会增加，如果你明白我的意思的话

标签： css html flexbox angular-material

【解决方案1】：

您应该使用md-content 作为您的主容器。

<md-content layout-fill layout="column">
 <div flex="50" style="border: 5px solid orange" layout="row">
 </div>
 <div flex="50" style="border: 5px solid blue" layout="row">
 </div>
</md-content>

这就是您的基本结构应该是什么样子。现在根据需要定义弹性值，您将获得适当的结果。请参阅以下链接以获取您的代码。

http://codepen.io/next1/pen/vGrWaM

【讨论】：

太棒了！但假设我有一个更复杂的嵌套结构。如何在儿童容器中获得相同的结果？例如：codepen.io/anon/pen/vGrdrd
差不多，是的，但是我可以让它与您在代码中评论的左侧的蓝色 div 一起工作吗？是否有嵌套无限滚动 md-content 的布局模式？感谢您的帮助
如果您尝试，row layout 和 flex 可以正常工作。当您尝试将column layout 与flex 一起使用时会出现问题。因此，请查看以下链接中的Layout Column and Container Heights 部分。 material.angularjs.org/latest/layout/tips

【解决方案2】：

你必须给两个 div 的父级一个最大高度，然后你给 md-content height:100%; and overflow:auto; 这样的 md-content 将保持与“联系人”相同的高度，并且它们不会超过父级并且不要推上层的

http://codepen.io/danyweis/pen/oxyZLK

【讨论】：

谢谢伙计！有没有办法让它更加模块化而不必指定像素限制？
你可以用 % 来限制它，但重要的是，如果不是它不起作用，父级的高度是有限的