拉伸 flexbox 子元素以填充列高

Question

我正在构建一个包含卡片的 flexbox 三列布局，并且所有卡片的高度都相同（检查 .card），但从视觉上看，它们不是因为 .card-info 元素的高度和有背景颜色。

我正在寻找一种方法来自动拉伸.card-info 的高度以填充.card 内的剩余空间。

如果有人建议，我无法在 .card 上设置背景颜色，因为我正在实现翻转动画，而卡片无法正常动画。

CSS：

.events-row {
  display: flex;
  justify-content: space-around;
}
.events-row .card {
  flex-basis: 31.3%;
  position: relative;
}
.events-row .card .card-info {
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info .button-cont {
  text-align: center;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1em;
}

结构：

<div id="events-cont">
  <div class="events-row">
    <div class="card">
      <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a>
          </div>
          <div class="card-info">
            <h2>Event title</h2>
            <h3>Event date</h3>
            <h3>Event venue</h3>
            <p>
              Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
            </p>
      </div>
    </div>
  </div>
</div>

演示：http://codepen.io/ourcore/pen/xgLyMW

Answer 1

您只需在 CSS 中添加 3 行：

.card {
        flex-basis: 31.3%;
        position: relative;
        display: flex;
        flex-direction: column;


        .card-info {
            padding: 15px;
            background-color: grey;
            text-align: left;
            font-size: 1rem;
            color: white;
            flex-grow: 1;

将卡片本身设置为 flex，然后将它们设置为 column，以便视觉上没有任何变化，但将 info 部分的 flex-grow 设置为 1。

Answer 2

您可以将 嵌套的 flexboxes 设置为 front 并使其成为 列 flexbox，您可以将 flex: 1 添加到 card-info 元素：

.events-row .card {
    display: flex;
}
.events-row .card .card-flip-cont {
  display: flex;
}
.events-row .card .card-flip-cont .front{
  display: flex;
  flex-direction: column;
}
.events-row .card .card-info{
  flex: 1;
}

添加这些样式后请看下面的演示：

.events-row {
  display: flex;
  justify-content: space-around;
}
.events-row .card {
  flex-basis: 31.3%;
  position: relative;
}
.events-row .card .card-img {
  position: relative;
}
.events-row .card .card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.events-row .card .card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  width: auto;
  font-size: 1em;
  color: white;
}
.events-row .card .card-info {
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info h1,
.events-row .card .card-info h2 {
  padding-bottom: 0;
}
.events-row .card .card-info h2 {
  font-size: 1.75em;
  color: black;
}
.events-row .card .card-info h3 {
  font-size: 1.1em;
  line-height: 1.5;
}
.events-row .card .card-info p {
  padding: 15px 0;
}
.events-row .card .card-info p a {
  font-size: 1.1em;
}
.events-row .card .card-info .button-cont {
  text-align: center;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1em;
}

/*NEW STYLES*/

.events-row .card {
    display: flex;
}
.events-row .card .card-flip-cont {
  display: flex;
}
.events-row .card .card-flip-cont .front{
  display: flex;
  flex-direction: column;
}
.events-row .card .card-info{
  flex: 1;
}

<div id="events-cont">
  <div class="events-row">
    <div class="card">
      <div class="card-flip-cont">
        <div class="front">
          <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a>
          </div>
          <div class="card-info">
            <h2>Event title</h2>
            <h3>Event date</h3>
            <h3>Event venue</h3>
            <p>
              Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-flip-cont">
        <div class="front">
          <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a>
          </div>
          <div class="card-info">
            <h2>Event title</h2>
            <h3>Event date</h3>
            <h3>Event venue</h3>
            <p>
              Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
            </p>
            <div class="button-cont">
              <div class="button purple-button">Buy Tickets</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

可能不理想，但您可以：

.card-flip-cont {
  height:100%;
}
.front {
  height:100%;
  overflow-y:hidden;
}
.card-info {
  height:100%;
}