如何让容器适配transform: scale缩放后的子元素（无需JS）

问题场景：容器.x内部有一个用transform: scale(0.5)缩放的子元素.y，但容器始终匹配子元素缩放前的原始宽度，需要让容器宽度适配子元素缩放后的实际视觉宽度，且不能用JavaScript。

方案1：用zoom替代transform: scale #

zoom属性会同时修改元素的视觉大小和布局尺寸，容器会自动适配缩放后的子元素宽度，无需额外调整：

.root {
  display: flex;
  font-size: 20px;
}

.x {
  border: 1px solid #000;
  display: flex;
}

.y {
  zoom: 0.5; /* 替换transform: scale */
}

说明：zoom不是W3C标准属性，但Chrome、Edge、Safari均原生支持，Firefox需在about:config中开启layout.css.zoom.enabled配置。

方案2：将缩放应用到容器上 #

如果必须使用transform，可以把缩放逻辑转移到容器.x上，子元素保持原始大小，这样容器的布局尺寸会自动匹配自身缩放后的视觉尺寸，间接实现需求：

.root {
  display: flex;
  font-size: 20px;
}

.x {
  border: 1px solid #000;
  display: flex;
  transform: scale(0.5);
  transform-origin: top left;
  width: fit-content;
}

.y {
  /* 移除transform: scale */
}

说明：这个方案的视觉效果和原需求一致，只是把缩放从子元素转移到容器，避免了transform不影响布局的问题。

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