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

max-height: 100%有height而不是height。所以你需要设置height这个（我不知道它为什么没有内容）。

您可以通过为此div插入<div flex="50" layout="column" style="height: 100%">来解决此问题。试试这个：

{{1}}

希望得到这个帮助。

为什么我的布局=＆＃34;列＆＃34;弯曲=＆＃34; 50＆＃34;不被尊重？

1 个答案: