title: angular-material md-card dynamic height
body: <p>I am trying to make it so my grid of md-cards have different heights depending on their image. Right now if one image is taller the entire row of cards match that height, making for a wonky look. What can I do to make the card content inside the <code>&lt;md-card&gt;</code> not stretch to match the row?</p>
  
  <p><a href="https://i.stack.imgur.com/U8Nm0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U8Nm0.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the html for the cards: </p>
  
  <pre><code>   &lt;section class="cards" ng-if="view === 'Articles'"&gt;
          &lt;div layout="row" layout-align="center stretch" layout-wrap&gt;
            &lt;md-card ng-repeat="article in home.articles | filter:searchCard | orderBy:'-negPos'"&gt;
              &lt;a ng-href="/article/{{article.id}}"&gt;&lt;img ng-src="{{article.imagePath}}" class="card-image" alt="Article image"&gt;&lt;/a&gt;
              &lt;div class="card_content"&gt;
                  &lt;div class="article_card_title"&gt;
                      &lt;a ng-href="/article/{{article.id}}"&gt;&lt;h3 class="md-subhead"&gt;{{article.title}}&lt;/h3&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="card_agency"&gt;
                      &lt;span class="agency_name"&gt;{{article.agency}}&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card_ratings"&gt;
                  &lt;div&gt;
                  &lt;img src="{{article.negPosBar}}"&gt;
                      &lt;md-tooltip md-direction="'bottom'"&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
                  &lt;img src="{{article.skewBar}}"&gt;         
                 &lt;/div&gt;
                &lt;div&gt;
                  &lt;img src="{{article.contBar}}"&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
            &lt;/md-card&gt;
            &lt;h1 class="md-display-1" ng-show="(home.articles | filter:searchCard).length == 0"&gt;No results!&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>md-card {
      width: 375px;
      border-radius: 3px;
  }
  
  .card_content {
      padding-left: 10px;
      height: 100%;
  }
  </code></pre>