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?

score 1 · Answer 1 · answered Jan 26 '18 at 00:44

1

Give a fixed height to .md-card-image-and-title add apply object-fit:contain rule to .md-card-image.

.md-card-image-and-title{
  height:150px;/* fixed height */
}
.md-card-image{
  height:100%;
  width:100%;
  object-fit:contain;
}

answered Jan 26 '18 at 00:44

Johna

1,836
2
18
29

Thanks! is there a way to do this without declaring a height though? – Dave Jan 26 '18 at 00:55
The other simple way is to make all the images same size. – Johna Jan 26 '18 at 05:02

score 1 · Accepted Answer · answered Jan 26 '18 at 02:29

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

score 1 · Answer 3 · answered Jan 29 '18 at 21:27

I know there's an accepted answer on here, but I'd like to put forth a potentially simpler fix.

<md-card layout="column">
  <img flex="50" ng-src="{{img}}"></img>
  <md-card-actions>
    //Buttons here
  </md-card-actions>
  <md-card-content flex>
    //expanding content here
  </md-card-content>
</md-card>

In this case, I'm using flex to tell the img tag to take up a certain percentage of the card's height with flex="50", letting the card actions take up their own auto height, and telling the card's content to fill whatever is left with flex

Need content to grow to same height

3 Answers3