0

Using angular material I'm trying to have a basic layout with a column containing two divs each taking 50% of the height.

When the divs are empty this is working fine but when they have unequal content the 50% flex is ignored and the div with more content takes up more of the height.

I have a codepen demonstrating the problem.

Here's my code:

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

What is going on and how can I fix this?

Update: This seems to be only happening in Chrome. Why?

Craig Shearer
  • 14,222
  • 19
  • 64
  • 95

1 Answers1

0

The layout-column has max-height: 100% not height. So you need set the height of this(I don't know why it works without content).

You can fix this by insert height for this div. Try this:

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

Hope this help.

DieuNQ
  • 975
  • 1
  • 7
  • 11