如何将HTML父元素的边界框适合CSS转换后的子元素？

Question

是否有一种方法,最好不使用JS,使容器在下面的代码片段中包装缩放的,更通用的,转换后的子元素,即纯红外边框完全包含虚线蓝色边框？

顺便说一下,这似乎是一个浏览器错误,因为它违反了默认的盒子模型行为,父母的大小会自动调整为适合孩子.

#container {
  border: 1px solid red;
}

#scaled {
  border: 1px dashed blue;
  transform: scale(3, 3);
  transform-origin: 0 0;
}

<div id="container">
  container
  <div id="scaled">
    scaled 3x
  </div>
</div>

Answer 1

没有使用JavaScript就没有办法做到这一点,但它也不是一个浏览器错误.在计算页面流并确定每个非变换元素的位置和大小之后,CSS变换在图形管道中发生.

这意味着CSS变换不会导致重新计算任何其他元素的大小,这就是为什么不调整容器大小以包含已转换的子元素的原因.这实际上是一个transform旨在通过完全避免布局重新计算来提高性能的功能.

干净利落的唯一方法是将变换应用于父元素,这似乎是你试图摆脱的.如果你想要它是动态的,并且你想远离JS,那么很遗憾没有别的办法.

#container {
  border: 1px solid red;
  transform: scale(3, 3);
  transform-origin: 0 0;
}

#scaled {
  border: 1px dashed blue;
  
}

<div id="container">
  container
  <div id="scaled">
    scaled 3x
  </div>
</div>