Html Flexbox行/列等高

我有一行有两列，都是50%。左边有一个图像，右边有一个文本。我的html：

.row{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.cell 1、.cell 2{
宽度：50%；
}
.cell2{
背景：绿色；
}

第2单元

在主容器上保持默认对齐方式

拉伸

，使两者具有相同的高度，然后对齐

单元格2内的内容物：


.row{
显示器：flex；
}
.cell1，
.cell2{
宽度：50%；
}
.cell2{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
背景：绿色；
}

这里有一些文字
移除
对齐项目：居中来自
行
并添加到
cell2
中，显示方式为：flex


.row{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.cell 1、.cell 2{
宽度：50%；
显示器：flex；
}
.cell1 img{
最大宽度：100%；
}
.cell2{
背景：绿色；
显示器：flex；
对齐项目：居中；
}

第2单元

.row{
显示器：flex；
/*弯曲方向：行*/
/*对齐项目：居中；*/
}
.cell 1、.cell 2{
宽度：50%；
}
.cell1 img{
宽度：100%；
高度：自动；
显示：块；
}
.cell2{
背景：绿色；
}

第2单元
这是可行的，但响应能力存在问题。当文本变得太长时，图像在某一点上会被拉伸。