Angular-material: 限制 md-content 高度

Question

我一直在为 angular-material 上的一些集成问题而苦苦挣扎。

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

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

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

感谢您的帮助

Answer 1

你必须给两个 div 的父级一个最大高度然后你给 md-content height:100%; and overflow:auto; 这样 md-content 将保持与 [=16 相同的高度=] 并且它们不会超过父代，也不会推高

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

Answer 2

您应该使用 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>

你的基本结构应该是这样的。现在根据需要定义 flex 值，您将获得适当的结果。请参阅下面的 link 了解您的代码。

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

Angular-material: 限制 md-content 高度

Angular-material: limit md-content height

html

css

flexbox

angular-material