如何让Grid布局中item-content子div撑满grid-item父容器剩余高度

问题场景 #

现有Grid布局中，每个.grid-item包含固定高度的.item-hero和内容高度可变的.item-content。当前内容较少的.item-content仅由自身内容决定高度，无法撑满.grid-item的剩余空间，尝试height:100%和基础Flex布局方案未生效。

解决方案 #

核心思路是让.grid-item及其内部的<a>标签都成为垂直方向的Flex容器，通过flex:1属性让内容容器自动填充剩余空间：

1. 将.grid-item设为垂直Flex容器，确保子元素<a>占满容器高度
2. 把<a>标签也设置为垂直Flex容器，并添加flex:1撑满.grid-item的可用空间
3. 给.item-content添加flex:1，使其自动填充<a>标签内的剩余高度

修改后的完整CSS代码 #

.grid-wrap {
    display: grid;
    grid-gap: 1.5em;
    margin: 1em;
}

.c-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 关键修改1：将grid-item设为垂直flex容器 */
.grid-item {
    width:100%;
    position: relative;
    margin: 0;
    background-color: #fff;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius);
    display: flex;
    flex-direction: column;
}   

.item-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0;
    background-color: #fafafa;
    border-radius:  var(--bt-border-radius) var(--bt-border-radius) 0 0;
}

/* 关键修改2：让a标签成为垂直flex容器并撑满grid-item */
.grid-item a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none; /* 可选：移除链接下划线 */
    color: inherit; /* 可选：继承父元素文字颜色 */
}

/* 关键修改3：让item-content填充剩余高度 */
.item-content {
    padding: 4%;
    min-height: 0;
    position: relative;
    background: #ccc;
    flex: 1;
}

说明 #

• .grid-item设为flex-direction: column后，内部的<a>会默认占满容器垂直空间
• <a>标签的flex:1确保它能撑满.grid-item高度，避免因内容不足导致高度收缩
• .item-content的flex:1会自动填充<a>标签中除.item-hero固定高度外的剩余空间，无论内容多少都会撑满容器

内容的提问来源于stack exchange，提问作者Corre