Html 为什么<；人力资源>；元素改变其高度？

我遇到了一个问题，我将hr标记插入到flex-box容器中，当我尝试更改屏幕大小时，hr元素的行也会更改其高度。同样，同一flex容器中的3条线的高度也不相同

可能是有容器或其他元素的大小。我不明白

代码如下：

双线性模板
* {
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Arial”，衬线；
字号：1em；
}
钮扣{
填充：10px 15px；
宽度：150px；
背景色：rgb（23117372）；
边界：无；
颜色：白色；
文本对齐：居中；
文本转换：大写；
}
.价格{
显示器：flex；
弯曲方向：立柱；
背景色：rgb（231237243）；
填充顶部：50px；
填充底部：80px；
}
.价格>h3{
自对准：居中；
文本对齐：居中；
颜色：rgb（57,75,80）；
字号：1.5em；
}
.价格>p{
自对准：居中；
文本对齐：居中；
垫顶：2件；
颜色：rgb（117、136、141）；
}
.价格表{
显示器：flex；
弯曲方向：行；
证明内容：中心；
填充顶部：70px；
}
.价格{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：450px；
宽度：380px；
背景色：白色；
颜色：rgb（180186192）；
文本转换：大写；
边界半径：5px；
边框：1px实心rgb（203213223）；
}
.价格{
高度：500px；
背景色：rgb（112157202）；
位置：相对位置；
颜色：rgb（194225225）；
顶部：-25px；
边界：无；
}
.价格.元素含量{
显示器：flex；
弯曲方向：立柱；
宽度：80%；
}
.价格.元素含量>h4{
颜色：rgb（129139149）；
字号：28px；
垫底：20px；
文本对齐：居中；
字体大小：正常；
}
.价格.元素含量>h4+p{
填充顶部：0；
填充底部：0；
}
.价格.元素含量>p{
填充顶部：12px；
垫底：12px；
文本对齐：居中；
}
.价格{
颜色：rgb（255187,66）；
字体大小：54px；
填充底部：0；
}
.prices.el.元素含量.pr>sup{
字体大小：32px；
}
.价格.元素含量.pr+p{
填充顶部：0；
填充底部：30px；
}
.prices.el.元素内容>按钮{
自对准：居中；
边缘顶部：20px；
字号：0.9em；
填充：15px；
背景色：rgb（255187,66）；
}
.价格.元素含量>人力资源{
边界：无；
颜色：rgb（226233240）；
背景色：rgb（226233240）；
高度：2倍；
}
.价格.主要元素含量.pr{
颜色：白色；
}
.价格.主要元素含量>h4{
颜色：白色；
}
.价格.主要元素含量>人力资源{
背景色：rgb（194225225）；
}
选择你的价格
我是同侧的，我是同侧的，我是同侧的

基本计划
22美元
每月

1账户


8小时支持


自定义云服务

开始
保险费计划
42美元
每月

1账户


8小时支持


自定义云服务

开始
黄金计划
62美元
每月

1账户


8小时支持


自定义云服务

开始

无法复制。无法复制。