Angular Material flex="50" 仅用于布局="row"

Question

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

现在我们只使用 angular-material 中的弹性布局。我们有这样的代码：

<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% 长div.

的高度

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

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

无效。

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

Answer 1

我在 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>

更新：

I forked your plunker and fixed it. Basically the flex-33 class was adding a max-height of 33%. I just set the max-height to 100%

Updated plunk

Answer 2

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

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

但多亏了 @srijith 的 Plunker，我终于注意到了它。

Angular Material flex="50" 仅用于布局="row"

Angular Material flex="50" only for layout="row"

css

flexbox

angularjs

angular-material