Html 如何使两个div具有相同的高度和宽度？

我正在制作一个显示抽认卡的HTML网页。这些抽认卡的正面和背面都有说明，并且可以在正面和背面有图像或链接视频。前面和后面显示在单独的div中，我使用的是Bootstrap。我将每个div的背景设置为白色，但这样做后，我意识到它们的高度不同

如上图所示，这不起作用

#前卡，
#背卡{
背景色：白色；
}
.row.col-sm-4{
显示器：flex；
}
.col-sm-4{
弹性：1；
填充：1em；
}

正面
返回
翻转卡


下一张卡片

使用flex为div设置相等的高度。。。像这样

#前卡，
#背卡{
背景色：红色；
填充物：5px；
溢出：隐藏；
最小高度：100%；
}
#前卡img{
宽度：100%；
}
.行{
显示器：flex；
}
.col-sm-4、.col-xs-4{
弹性：1；
填充：1em；
}

正面
返回
翻转卡


下一张卡片

您可以尝试使用.row{display:flex；}调整高度，如图所示：，关于宽度，bootstrap应该使用.col-。。。