如何让flexbox容器内所有子项高度与最高的动态子项保持一致？

你当前布局高度不一致的核心原因是flex容器设置了align-items: center，覆盖了flex默认的stretch（拉伸填充容器高度）特性，导致子元素只会收缩到自身内容高度。不需要用媒体查询硬写高度，也不需要JS计算，修改少量CSS属性即可实现原生等高布局：

具体修改步骤 #

• 调整.row-first的对齐属性，删除原有align-items: center，或显式设置为align-items: stretch，保证两个二级.two-statPill容器先实现等高
• 调整.two-statPill的对齐属性，删除原有align-items: center，显式设置为align-items: stretch
• 给.statPill添加flex: 1属性，让它可以自动填充flex容器的剩余空间，适配行/列两种flex方向的布局场景

修改后的完整CSS代码 #

.mainDiv {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.row-first {
    display: flex;
    align-items: stretch;
    /* 可选：添加间隙替代手动margin调整 */
    gap: 0.2rem;
}
.statPill {
    border: 3px solid var(--text-primary);
    border-radius: 5px;
    background-color: var(--bg-navbar);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 48%;
    min-width: 11rem;
    padding: 0.2rem;
    margin: 0;
    /* 新增属性，自动填充剩余空间 */
    flex: 1;
}
.statPill p.pillAmount {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
}
.pill-left {
  text-align: center;
}
.pill-right {
  text-align: center;
}
.pill-right p {
  margin: 5px 0;
}
.two-statPill {
  display: flex;
  height: 100%;
  width: 50%;
  align-items: stretch;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  /* 可选：添加间隙替代手动margin调整 */
  gap: 0.2rem;
}

@media only screen and (max-width: 768px)
{
  .statPill {
    margin-bottom: 0.5rem;
    width: 100%;
  }
  .row-first {
    flex-direction: column;
  }
}
@media only screen and (max-width: 980px)
{
  .two-statPill {
    flex-direction: column;
    width: 100%;
  }
  .statPill {
    width: 98%;
    margin: 0.2rem 0;
  }
}

效果说明 #

修改后所有statPill会自动适配当前行/列中最高元素的高度，所有断点下都能保持等高效果，完全纯原生CSS实现无额外性能损耗。

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