Html 为什么使用flex wrap会破坏包含大型图像的项目的高度？

我使用一个启用Flexbox的容器和2个子div设置了一个简单的页面

使用容器的视图宽度和视图高度设置大小

使用css flex速记将子div设置为600px和400px的宽度

已将大图像添加到子图像，并将其大小调整为100%

在容器上启用

flex-wrap:wrap

之前，此功能一直工作正常

然后孩子们的身高突然变大了

有没有办法纠正这种行为

下面是我的代码

*{
保证金：0；
填充：0；
框大小：边框框；
}
.柔性容器{
宽度：100vw；
高度：100vh；
显示器：flex；
柔性包装：包装；
}
.flex-item1{
弹性：1600像素；
填充：20px；
背景颜色：珊瑚；
}
.flex-item2{
flex:1400px；
填充：20px；
背景颜色：矢车菊蓝；
}
.形象{
身高：100%；
宽度：100%；
对象匹配：包含；
}

标题1

只需在代码中添加以下内容：

.flex-item1 {
   height: 100%;
}

*{
保证金：0；
填充：0；
框大小：边框框；
}
.柔性容器{
宽度：100vw；
高度：100vh；
显示器：flex；
柔性包装：包装；
}
.flex-item1{
弹性：1600像素；
填充：20px；
背景颜色：珊瑚；
高度：100%；/*新*/
}
.flex-item2{
flex:1400px；
填充：20px；
背景颜色：矢车菊蓝；
}
.形象{
身高：100%；
宽度：100%；
对象匹配：包含；
}

标题1

这解决了问题！谢谢你，我弄明白了，快发疯了。现在我知道问题出在哪里了。