Flex布局下背景图Div无法填充父容器高度的问题求助

需求说明 #

• 父容器.parent采用Flex布局，内部.imgdiv占30%宽度，.parentText占70%宽度
• 父容器高度由.parentText的内容高度决定，不固定任何元素高度
• 要求.imgdiv自动填充父容器的高度，背景图正常展示

问题现状 #

.imgdiv实际高度为0，无法填充父容器高度，背景图无法正常展示

问题分析与修复方案 #

原代码存在的问题 #

1. .parent的display:flex后缺失分号，属于语法错误
2. .parent设置了align-items: center，导致子元素垂直居中而非拉伸填充高度
3. .imgdiv的background复合属性覆盖了之前设置的background-size等属性，且height:100%在动态高度的Flex父容器中不生效

修改后的完整CSS代码 #

.parent {
    width: 100%;
    display: flex;
    flex-direction: row;
    /* 移除align-items: center，使用默认的stretch让子元素垂直拉伸 */
}

.parent > .imgdiv{
    width: 30%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(img.png);
    /* 移除height:100%，Flex子元素在stretch规则下会自动填充父容器高度 */
}

.parent > .parentText{
    width: 70%;
    display: flex;
    flex-direction: column;
    /* 可选：添加内边距优化文本排版 */
    padding: 0 1em;
}

关键修改点解释 #

• 修复.parent的语法错误，补上display:flex后的分号
• 移除.parent的align-items: center，Flex布局默认的align-items: stretch会让所有子元素在垂直方向自动拉伸，填满父容器的动态高度
• 将.imgdiv的background: url(img.png)改为background-image: url(img.png)，避免复合属性覆盖背景图的尺寸、定位等配置
• 删除.imgdiv的height:100%，依赖Flex的拉伸规则自动适配父容器高度

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