为什么我的 layout="column" flex="50" 没有得到尊重？

Question

使用有角度的材料，我尝试使用包含两个 div 的列的基本布局，每个 div 占高度的 50%。

当 div 为空时，这可以正常工作，但当它们的内容不相等时，50% 的 flex 将被忽略，内容更多的 div 会占据更多的高度。

我有一个 codepen 来演示这个问题。

这是我的代码：

<div ng-cloak ng-app="MyApp">
  <md-content>
    <div layout="row" class="outer-row">
      <div flex="50" layout="column">
        <h3>Both divs are 50% height</h3>
        <div flex="50" class="inner-column">
        </div>
        <div flex="50" class="inner-column">
        </div>
      </div>
      <div flex="50" layout="column">
        <h3>Both divs are 50% height but 2nd grows because it has more content</h3>
        <div flex="50" class="inner-column" layout="column">
          <p>A little content</p>
          <p>A little content</p>
          <p>A little content</p>
        </div>
        <div flex="50" class="inner-column" layout="column">
          <p>A lot of content</p>
          <p>A lot of content</p>
          <p>A lot of content</p>
          <p>A lot of content</p>
          <p>A lot of content</p>
          <p>A lot of content</p>
          <p>A lot of content</p>
          <p>A lot of content</p>
          <p>A lot of content</p>
          <p>A lot of content</p>
        </div>
      </div>
    </div>
  </md-content>
</div>

发生了什么，我该如何解决？

更新：这似乎只发生在 Chrome 中。为什么？

Answer 1

layout-column 具有 max-height: 100% 而不是 height。所以你需要设置这个height（我不知道为什么它在没有内容的情况下工作）。

您可以通过为此 div 插入 height 来解决此问题。试试这个：

<div flex="50" layout="column" style="height: 100%">

希望对您有所帮助。