Html 拉伸flexbox子项以填充列高度

我正在构建一个

flexbox

三列布局，其中包含卡片，并且所有的卡片都具有相同的高度（检查

.card

），但从视觉上看，它们并非如此，因为

.card info

元素高度不同，并且具有背景色

我正在寻找一种方法来自动拉伸

.card info

的高度，以填充

.card

下的剩余空间

如果有人建议，我不能在

.card

上设置背景颜色，因为我正在实现翻转动画，而该卡不能正确地使用它进行动画

CSS:

结构：

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

活动名称
活动日期
活动地点

例如，在欧盟的适应范围内，我们有一个共同的目标。

---

演示：

可能不理想，但您可以：

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

您可以将嵌套的flexbox设置为

front

，并将其设置为列

flexbox

，还可以将

flex:1

添加到

卡信息

元素：

.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行{
显示器：flex；
证明内容：周围的空间；
}
.事件行.卡片{
弹性基准：31.3%；
位置：相对位置；
}
.事件行.卡片.卡片img{
位置：相对位置；
}
.事件行.卡片.卡片img img{
显示：块；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.events行.card.card img.series标题{
位置：绝对位置；
排名：0；
左：0；
填充物：5px10px；
宽度：自动；
字号：1em；
颜色：白色；
}
.事件行.卡片.卡片信息{
填充：15px；
背景颜色：灰色；
文本对齐：左对齐；
字号：1rem；
颜色：白色；
}
.事件行.卡片.卡片信息h1，
.事件行.卡片.卡片信息h2{
填充底部：0；
}
.事件行.卡片.卡片信息h2{
字号：1.75em；
颜色：黑色；
}
.事件行.卡片.卡片信息h3{
字体大小：1.1米；
线高：1.5；
}
.事件行.卡片.卡片信息p{
填充：15px0；
}
.事件行.卡片.卡片信息p a{
字体大小：1.1米；
}
.events行.卡.卡信息.按钮cont{
文本对齐：居中；
}
.events行.卡.卡信息.按钮cont.按钮{
显示：内联块；
利润率：30像素；
填充：10px 30px；
字号：1em；
}
/*新风格*/
.事件行.卡片{
显示器：flex；
}
.事件行.卡片.卡片翻转继续{
显示器：flex；
}
.事件行.卡片.卡片翻转继续前部{
显示器：flex；
弯曲方向：立柱；
}
.事件行.卡片.卡片信息{
弹性：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，这样在视觉上不会发生任何变化，但将信息部分的flex grow设置为1。

为什么不将卡片元素本身的背景设置为1呢？嵌套的FlexBox…@powerbuoy我在帖子中解释了原因，很抱歉，我一定错过了它。然后，解决方案是将高度设置为100℅谢谢这就是我要找的，但我在你回答之前编辑了我的问题。如果没有

.card flip cont

和

front

元素，是否可以实现？卡片需要成行，而不是成列。它们是成行的。啊，是的。我在

事件行

上尝试了

弹性方向：列

，而不是

卡片

。我接受这个，因为它需要最少的改变。谢谢

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