Angular Material flex="50" 仅适用于 layout="row"答案

【问题标题】：Angular Material flex="50" only for layout="row"Angular Material flex="50" 仅适用于 layout="row"
【发布时间】：2016-12-08 17:51:01
【问题描述】：

我们正在使用 angular-material 来创建一个新的响应式网站。

现在我们只使用 angular-material 中的 flex-layouts。我们有这样的代码：

<div layout="column" layout-gt-md="row">
    <div flex="50">
        Here's some text without a fixed length.
    </div>
    <div flex="50">
        Here's some text without a fixed length.
   </div>
</div>

在这种情况下，我们想要实现，我们在大型显示器上具有 50% 宽度的行（从左到右）。但问题是：如果它是中型或更小的设备，它有 50% 的高度（更准确地说是max-height），这会导致与其他div 的一些重叠，因为文本长于@ 的 50% 高度987654325@.

我们如何实现flex="50" 仅适用于layout="row" 并且列高适应内容大小？将 CSS 类覆盖为

.layout-column > .flex-50 {
    max-height: inherit;
}

没用。

我已在 Plunker 上提供了该问题的 demo。

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

问题在于 Visual Studio 创建 HTML 文件的方式和我们的疏忽。

添加<!DOCTYPE html> 解决了问题....尴尬。

但是感谢@srijith的Plunker，我终于注意到了。

【讨论】：

刚刚注意到您的回答！无论如何，请查看我的更新回复。祝你好运！
您的解决方案看起来也很有趣......当我们以某种方式将最大高度设置为 100% 时，我们的高度总是 100%。这意味着它在 div 之间有太多的空白。
是的，否则 100% 被 33% 覆盖。我的!important 似乎获得了 100%

【解决方案2】：

我在 plunker 中尝试了您的问题，对于较小的屏幕，高度确实会适应 div 的内容。

检查这个 plunker 权利here

我也是这样用的

<div layout="column" layout-gt-xs="row">
 <div flex="50" style="border: 1px solid green;">
  <Really long text here>
 </div>
 <div flex="50" style="border: 1px solid green;">
  Here's some text without a fixed length.
 </div>
</div>

更新：

我分叉了你的 plunker 并修复了它。基本上 flex-33 类增加了 33% 的 max-height。我只是将max-height 设置为 100%

Updated plunk

【讨论】：

确实看起来像预期的那样。我的本地测试结果是：MS IE - 重叠；铬 52 - 重叠； MS Edge - 看起来像预期的那样； FF Dev 49.0a2 - 看起来像预期的那样。 plunker 有不同的渲染引擎吗？（用 chrome 测试，它看起来不错，但是当视口变得太小时，“真实”网站会重叠，因此文本会变长）。
我明白了。您是否有父 div 或可以创建此行为的东西？更好的是，如果你能得到一个 plunker 来展示你的问题，那就太棒了
给你先生：plnkr.co/edit/n3r2CBArmzj2cqGeLgeU?p=preview 当您缩小预览区域时，它会显示问题。
我已经更新了答案。您需要覆盖flex-33 类上的max-height
我注意到 <!DOCTYPE html> 丢失了，这解决了问题。你的 Plunker 演示有它，它在那里工作。 ;-)