Need content to grow to same height

Question

I'm using AngularJS Material and am running into an issue trying to get md-cards to be the same height. On the screen, the cards are the same height, but I really only want the content portion to grow to fill in the free space. Below you can see that my cards are the same height, but I want my image and image title to stay put, while everything below grows to fit the greatest height:

My code for the cards look something like this:

  <md-card>
    <div class="md-card-image-and-title">
      <img src="first_day.png"  class="md-card-image" alt="{{c.title}}">
      <span class="md-title">{{c.title}}</span>
    </div>

    <md-card-actions layout="row" layout-align="start center">
      <md-button>Action 1</md-button>
      <md-button>Action 2</md-button>
    </md-card-actions>
    <md-card-content>
      <p>STUFF</p>
      <p>STUFF</p>
      <md-divider style="padding-bottom:10px;"></md-divider>
      <p>STUFF</p>    
    </md-card-content>
  </md-card>

My CSS for the row and the cards within looks like this:

.parent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.parent .col-md-4, .parent .col-md-4 div, .parent .col-md-4 div > md-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
    //need these three lines in order to work in IE
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

The row has the class "parent" and each of the three cards are contained in a col-md-4 class.

I've tried a bunch of different CSS related changes, but nothing seems to work. Can someone provide some guidance on how to make the cards same height, but have the card images and card titles stay in place?

Answer 1

i have create a codepen codepen examplefor you, hope it helps !. Here are the code example :

HTML

<!-- Reference Question : https://stackoverflow.com/questions/48453954/need-content-to-grow-to-same-height -->

<section>
  <article>
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
    <div>
      <header>
        <h2>Ibrahim Aziz</h2>
        <span>Administrator</span>
      </header>
      <p>I'm a technical lead at infoconnect</p>
    </div>
  </article>

  <article>
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
    <div>
      <header>
        <h2>Ibrahim Aziz</h2>
        <span>Administrator</span>
      </header>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
  </article>

  <article>
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
    <div>
      <header>
        <h2>Ibrahim Aziz</h2>
        <span>Administrator</span>
      </header>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </article>
</section>

CSS

section
{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

section article
{
  margin: 20px;
  width: 240px;
  height: auto;
  flex-grow: 1;
  background-color: red;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;
}

section article figure
{
  margin: 0px;
  height: 120px;
  width: 100%;
  flex-grow: 0;
  background-color: blue;
}

section article div
{
  align-self: flex-start;
  flex-grow: 1;
}

Please ask if you need further explanation, thank you !.