为何Flex子元素高度不一致？跨设备与容器尺寸适配问题

经进一步排查发现，该问题仅在部分设备上出现，推测与视口尺寸相关。从代码可见，父容器已设置固定宽高，理论上Flex子元素应拥有完全一致的高度，但实际在不同父容器尺寸及设备上，有时会出现子元素尺寸不同的情况。需要确保无论在何种设备或父容器尺寸下，Flex子元素都能保持相同高度。

原代码 #

JavaScript #

console.clear();

CSS #

.header {
  height: 200px;
  width: 500px;
  margin: auto;
  display: flex;
}

.flex-container {
  height: 20px;
  width: 20px;
  background-color: black;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  transform: scale(5);
}

.child {
  display: block;
  background-color: white;
  height: 10%;
  width: 90%;
}

HTML #

<div class="header">
  <div class="flex-container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>

问题原因 #

核心问题出在小尺寸容器+CSS缩放的组合上：.flex-container本身只有20px高，子元素设置的10%高度仅为2px，后续通过transform: scale(5)放大后，实际渲染的10px高度在不同设备的像素密度、渲染引擎处理小数像素时，容易出现精度偏差，导致子元素高度不一致。另外，百分比高度依赖父容器的精确计算值，叠加缩放后进一步放大了渲染误差。

解决方法 #

方案1：直接设置目标尺寸，移除缩放（推荐） #

放弃小容器加缩放的方式，直接把.flex-container设置为缩放后的目标尺寸，这样子元素的高度计算更直接，渲染无精度问题：

.header {
  height: 200px;
  width: 500px;
  margin: auto;
  display: flex;
}

.flex-container {
  /* 直接设置缩放后的100px尺寸，去掉scale */
  height: 100px;
  width: 100px;
  background-color: black;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.child {
  display: block;
  background-color: white;
  width: 90%;
  height: 10%; /* 此时10%为10px，渲染稳定 */
}

方案2：用Flex的flex-grow平分高度 #

如果必须保留缩放，改用Flex布局的flex-grow属性让子元素自动平分父容器高度，避免依赖百分比计算：

.header {
  height: 200px;
  width: 500px;
  margin: auto;
  display: flex;
}

.flex-container {
  height: 20px;
  width: 20px;
  background-color: black;
  margin: auto;
  display: flex;
  /* 移除justify-content，让flex-grow分配空间 */
  align-items: center;
  flex-direction: column;
  transform: scale(5);
}

.child {
  display: block;
  background-color: white;
  width: 90%;
  flex: 1; /* 三个子元素平分父容器高度 */
}

这两种方案都能确保子元素在任何设备或父容器尺寸下保持一致高度，其中方案1的渲染稳定性最优，避免了缩放带来的潜在问题。

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