CSS求助：右侧容器内元素无法填充剩余垂直空间

效果对比 #

• 想要实现的效果：
  
• 当前完成的效果：
  

问题描述 #

左侧是固定高度（300px）的图片容器，右侧aqua背景容器已匹配该高度。现在需要让右侧栏中蓝色的info-banner下方的绿色events-banner自动填充所有剩余垂直空间，但目前该容器无法展开。

现有代码 #

HTML代码 #

<div class="full-page">
    <div class="display-row">
        <div class="col-lg-5 age-update rounded-border">
            <div class="image-container"></div>
        </div>
        <div class="col-lg-7 ml-15 scale-height">
            <div class="info-banner rounded-border">
                <div>
                    <p>Free Civ Pool</p>
                </div>
                <div>
                    <p>Rotation Aug 18th</p>
                </div>
            </div>
            <div class="events-banner rounded-border"></div>
        </div>
    </div> 
</div>

CSS代码 #

.full-page {
    margin: auto;
    width: 95%;
}

.full-page p {
    color: white;
}

.display-row {
    display: flex;
}

.rounded-border {
    border-color: black;
    border-width: 2px;
    border-style: solid;
    border-radius: 15px;
}

.age-update {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('src\assets\images\age3update.jpg');
    background-size: cover;
    background-position: center;
}

.scale-height {
    flex-grow: 1;
    background-color: aqua;
}

.info-banner {
    background-color: blue;
    height: min-content;
}

.events-banner {
    flex-grow: 1;
    flex-direction: column;
    background-color: rgb(81, 255, 0);
}

解决方案 #

核心问题是右侧的.scale-height容器没有启用flex布局，导致子元素的flex-grow属性无法生效。只需修改以下几处：

1. 给.scale-height添加flex布局设置，让内部元素垂直排列：

.scale-height {
    flex-grow: 1;
    background-color: aqua;
    display: flex; /* 新增：启用flex布局 */
    flex-direction: column; /* 新增：设置垂直排列 */
    gap: 10px; /* 可选：给两个banner之间加间距，提升美观度 */
    padding: 10px; /* 可选：避免banner贴容器边缘 */
}

2. 移除.events-banner中无用的flex-direction: column（该属性仅对flex容器生效，它作为子元素不需要此设置）：

.events-banner {
    flex-grow: 1;
    /* flex-direction: column; 移除此行 */
    background-color: rgb(81, 255, 0);
}

3. 可选：给.info-banner加内边距，让文字不贴边：

.info-banner {
    background-color: blue;
    height: min-content;
    padding: 10px; /* 新增：优化文字显示 */
}

原理说明 #

flex-grow属性的作用是让flex子元素分配父容器的剩余空间，但只有当父容器设置了display: flex时，这个属性才会生效。给.scale-height设置垂直方向的flex布局后，info-banner会根据自身内容高度占据空间，剩下的所有垂直空间就会被events-banner通过flex-grow: 1自动填满。

内容的提问来源于stack exchange，提问作者Gustavo Baiocchi Costa