角度材料:限制md内容高度

时间:2016-04-19 17:24:14

标签: css html5 flexbox angular-material

我一直在讨论角度材料的一些集成问题。

在下面的代码示例中,我试图强制橙色 this蓝色 div具有相同的高度添加div。 但是,包含大文本的 blue div的flex="50"子元素的高度会增加,而它应保持不变并在其范围内滚动。

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

如果md-content元素的内容长度不变,我怎能强迫md-content元素不会增长?

感谢您的帮助

2 个答案:

答案 0 :(得分:1)

你必须给两个div的父级最大高度,然后你就像这样的md-content height:100%; and overflow:auto; md-content将保持与#34相同的高度;联系&#34 ;他们不会在父母身上成长,也不会在上层人员中挣扎

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

答案 1 :(得分: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>

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

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