Html Css框不是'；不能正确地显示在彼此旁边

我制作了两个框，其中一个是数字，第二个是图像，并用css对它们进行了样式设置。虽然一切都是一样的，但如果你注意到我在哪里犯了错误，为什么左边的框在底部显得更小

.flex容器
/*把箱子排成一行*/
{
显示器：flex；
弯曲方向：行；
位置：相对位置；
左：30%；
}
.首先{
填充：20px；
}
.卡片{
宽度：250px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
文本对齐：居中；
}
.标题
/*日历说明*/
{
背景色：rgb（144204194）；
字体系列：Arial、Helvetica、无衬线字体；
颜色：白色；
填充：10px；
字体大小：50px；
线高：20px；
高度：210px；
}
.狭窄
/*窄的白色条纹*/
{
背景色：白色；
填充物：5px；
}
.文本{
颜色：rgb（22317726）；
字体系列：Arial、Helvetica、无衬线字体；
}
.文本：悬停{
颜色：rgb（144204194）；
}
白天
/*指定较小的日期样式的步骤*/
{
字体大小：20px；
}

2.
周六
2018年5月

这里在哪里

这就是FlexBox的工作原理。在行的情况下，每个元素的子元素的高度相等，但仅直接子元素的高度相等，而不是所有子元素的高度相等

---

在您的情况下，解决此问题的最简单方法是先移除带有class

的容器，然后将带有class
卡的容器作为flex容器的直接子容器。
我已经移除了高度：53px，并首先提供了显示：flex


.flex容器
/*把箱子排成一行*/
{
显示器：flex；
弯曲方向：行；
位置：相对位置；
左：30%；
}
.首先{
填充：20px；
显示器：flex；
}
.卡片{
宽度：250px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
文本对齐：居中；
}
.标题
/*日历说明*/
{
背景色：rgb（144204194）；
字体系列：Arial、Helvetica、无衬线字体；
颜色：白色；
填充：10px；
字体大小：50px；
线高：20px；
高度：210px；
}
.狭窄
/*窄的白色条纹*/
{
背景色：白色；
填充物：5px；
}
.文本{
颜色：rgb（22317726）；
字体系列：Arial、Helvetica、无衬线字体；
}
.文本：悬停{
颜色：rgb（144204194）；
}
白天
/*指定较小的日期样式的步骤*/
{
字体大小：20px；
}

2.
周六
2018年5月

这里在哪里
这是因为
style=“height:53px”
如果希望两张卡具有相同的高度，则为一个元素定义固定高度是不健康的。