Angular Material Card fill height of parent

Question

I am trying to figure out how to set the height of a md-card to fill its parent. Here is my example:

<div ng-controller="AppCtrl" ng-app="MyApp">
  <div layout="column" layout-gt-sm="row" layout-padding="layout-padding" layout-fill="layout-fill">

    <div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill">
      <div flex="flex" layout="row">
        <md-content flex="flex">
          <md-card>
            <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
          </md-card>
        </md-content>
      </div>
    </div>

    <div flex="flex" flex-gt-sm="33" layout="column">
      <md-card flex="flex">
        <md-card-content>
          <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p>
        </md-card-content>
        <div layout="column" layout-gt-sm="row" class="md-actions">
          <md-button flex="flex" ng-click="asdf()">asdf
            <md-tooltip>asdf</md-tooltip>
          </md-button>
          <md-button flex="flex" ng-click="qqqqqqqq();">qqqqqqqq
            <md-tooltip>qqqqqqqq</md-tooltip>
          </md-button>
        </div>
      </md-card>
      <md-card flex="flex">
        <md-card-content>
          <div layout="column">
            <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p>
        </md-card-content>
      </md-card>
    </div>

  </div>
</div>

http://codepen.io/anon/pen/BNPBwJ

Can anyone help ?

Answer 1

You seem to be making it a little over complicated. It works when you simplify it like this:

<md-content layout="row" flex>
  <md-card flex="33">
    <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
  </md-card>
    ...

instead of

<div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill">
  <div flex="flex" layout="row">
    <md-content flex="flex">
      <md-card>
        <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
      </md-card>
    </md-content>
  </div>
</div>

In my own code I also added a class to md-content to set the height specifically, and the cards fill the space from there.