Flex div 作为 img-bacground 不适合受另一个子 div 影响的最大父 div

Question

我的最终布局应该如下：

“img div”和“parent text div”的宽度分别固定为“parent div”的 30% 和 70%。 父级的高度受父级文本 div 的高度影响，而这又取决于其子级中包含的文本量。

现在的问题是“img div”无法填充“parent div”的所有可用高度，事实上，它的高度为0。我更喜欢仍然使用flex display而不是固定任何div的高度。

我的 css 代码：

.parent {
    width: 100%;
    display:flex
    flex-direction: row;
    align-items: center;
}

.parent > .imgdiv{
    width:30%;
    display: flex;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background: url(img.png);
}

.parent > .parentText{
    width: 70%;
    display: flex;
    flex-direction: column;
}

子文本 div 具有类似的样式 css ...有什么建议吗？

Answer 1

将父级的align-items更改为stretch并从 imgdiv 中删除height: 100% 。

JS小提琴： https://jsfiddle.net/k597xcrv/1/