html - 转换容器内的内容

Question

问题是，当使用该属性时，transform 父元素忽略了子元素大小的增加。

示例1:使用宽度和高度的子容器

.main {
  display: inline-flex;
  background: green;
  padding: 10px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
}

<div class="main">
  <div class="element"></div>
</div>

示例 2:使用转换的子容器

.main {
  display: inline-flex;
  background: green;
  padding: 10px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
  transform: scale(1, 2);
}

<div class="main">
  <div class="element"></div>
</div>

如何让它transform考虑父容器？

Answer 1

这是一个使用js的解决方案。不过，使用 jq 会使代码更小。

您可以对所有转换后的 div 运行此函数

 document.querySelectorAll(".element").forEach((x)=>{
    var elPos = x.getBoundingClientRect();
    // make sure that the parent is at least as big as child
    x.parentElement.style.minHeight  = elPos.height +"px";
    x.parentElement.style.minWidth = elPos.width + "px"; 
    // make sure that the top of the child start with the parent
     var elParentPos = x.parentElement.getBoundingClientRect();
     if (elPos.top < elParentPos.top)
      //  Math.abs((elPos.height / elPos.top) is the scale diffrent
     x.style.top = (elParentPos.top * Math.abs((elPos.height / elPos.top))) +"px"
    
 })

.main {
  display: inline-flex;
  background: green;
  padding: 10px;
}

.element {
  display: block;
  background: red;
  width: 100px;
  height: 100px;
  transform: scale(1, 2);
  position:relative;
}

<div class="main">
  <div class="element"></div>
</div>