css - 需要内容增长到相同的高度

Question

我正在使用 AngularJS Material，但在尝试让 md-cards 具有相同高度时遇到了问题。在屏幕上，卡片的高度相同，但我真的只希望内容部分增长以填充可用空间。您可以在下面看到我的卡片高度相同，但我希望我的图片和图片标题保持不变，而下面的所有内容都会增长以适应最大高度:

我的卡片代码如下所示:

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

我的行和其中的卡片的 CSS 如下所示:

.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;
}

该行的类为“parent”，三张卡片中的每一张都包含在 col-md-4 类中。

我已经尝试了一系列不同的 CSS 相关更改，但似乎没有任何效果。有人可以提供一些关于如何使卡片高度相同但卡片图像和卡片标题保持原位的指导吗？

Answer 1

我已经创建了一个codepen codepen 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;
}

请询问是否需要进一步解释，谢谢!