Html flexbox内的word wrap不工作

我使用的是flexbox，每个项目下都包含图片和文本。我需要使所有图片的高度相同（宽度可能不同）和文字包装，这样它就不会扩展项目

但我成功地只启用了宽度（而不是高度）合理的换行

注意：我需要证明图片，而不是项目

.wrapper1，
.wrapper 2{
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
.弹性项目{
保证金：5px；
背景色：#ddd；
}
.wrapper1.flex项目{
宽度：150px；
}
.flex项目p：最后一个孩子{
页边距底部：0；
}
.卡片图像{
宽度：100%；
}
.卡体{
填充：7px；
单词包装：打断单词；
}
.wrapper2.flex项目{
宽度：自动；
}
.wrapper2.卡片图像{
高度：231px；
宽度：自动；
}

您必须指定最大宽度或弹性基础属性

.wrapper2 .flex-item {
    flex: 0 1 150px;
}

或

---

我想这对你有用，试试看，让我知道

.wrapper2 .card-image {
    height: 231px;
}

---

选中此项

是否是浏览器特有的问题？？至少我需要它在Chrome中工作。确定一列中始终有3行，否则它会有所不同？此flexbox应该自动包装其项目（这就是我使用flexbox的原因）。根据分辨率的不同，它一行包含2-5个项目。自动换行可以工作，但项目会变得凌乱。因此，这不是一个可接受的解决方案。正如前面的回答一样，它使文字包装起作用，但破坏了卡片的布局。对不起，我忘了更新它，现在我已经更新了我的小提琴，你可以检查它，我想这是你想要的。谢谢，金字塔先生，但在固定宽度和固定高度的情况下，一些图像会失真（如中间的图像），我想保持比例。理想的结果将是具有固定高度和保留比例的图像（因此它们可以变得比通常更宽）和文字包装文本。下面是我想要实现的示例+文字包装文本（文本在本页上不包装）：好的，我得到了这个检查，检查您的参考，您可以看到它们的固定高度为（231px）当宽度设置为“自动”时，同样地，您希望保留比例，然后将高度设置为“自动”或将宽度设置为“自动”，那么它将始终保留当前您正在处理的高度和宽度的比例，这就是您存在比例问题的原因

.wrapper2 .card-image {
    height: 231px;
}