css - Angular-material:限制 md-content 高度

标签 css html flexbox angular-material

我一直在努力解决 Angular-Material 上的一些集成问题。

在下面的代码示例中,我尝试强制使用橙色 div蓝色 div 通过添加 flex="50" 获得相同的高度。 但是,包含大文本的 blue div 的 md-content 子元素的高度会增加,但它应该保持不变并在其边界内滚动。

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

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

感谢您的帮助

最佳答案

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

关于css - Angular-material:限制 md-content 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36725332/

相关文章:

PHP & MYSQL -- 不要插入相同的数据

css - 使用 React Native 模拟内联 block

html - 在元素中水平和垂直居中文本

css - em 的高度是多少?

javascript - .innerHTML 不会改变数学测验的值

css - react native : "Auto" width for text node

html - 删除列表项左侧的空格

css - 有没有办法在 CSS 媒体查询中使用 OR 条件

ruby-on-rails - SASS 部分覆盖取决于品牌

html - 使 div 占浏览器窗口高度的 100%