为何flex容器中的<hr>元素高度随屏幕变化且不一致？

Got it, let's tackle this HR height problem you're facing. Here's the breakdown and solution:

What's Causing the Issue #

Your .element-content container uses display: flex; flex-direction: column, which turns all its child elements (including the <hr> tags) into flex items. By default, flex items have flex-shrink: 1 enabled—this means they'll automatically shrink or stretch to fill available space in the flex container.

Since your three .el containers have different heights (the middle one is 500px vs 450px for the others), the flex layout is adjusting the HRs to fill the extra vertical space, leading to inconsistent heights that change with screen size.

The Fix #

We need to disable flex shrinking for the HR elements to lock in their set height. Update your HR styles like this:

.prices .el .element-content > hr {
  border: none;
  color: rgb(226, 233, 240);
  background-color: rgb(226, 233, 240);
  height: 2px;
  flex-shrink: 0; /* Add this line to prevent stretching/shrinking */
  min-height: 2px; /* Optional: Extra safeguard to maintain height */
}

.prices .main-el .element-content > hr {
  background-color: rgb(194, 225, 225);
  flex-shrink: 0; /* Don't forget the main-el HR too */
  min-height: 2px;
}

Why This Works #

• flex-shrink: 0 tells the flex container not to adjust the HR's size to fit available space—it will keep the exact height you set.
• Adding min-height is an extra safety net to ensure the HR never gets smaller than your intended 2px, even if other styles try to override it.

After making this change, all your HRs will stay at a consistent 2px height, regardless of screen size or the parent container's height differences.

内容的提问来源于stack exchange，提问作者Julia