CSS对子元素进行缩放变换不会影响父元素大小

Question

我有一个组件太大了，我想把它缩小。我能通过缩放变换来做到这一点，但是父容器不会收缩以适应。

在我的实际代码中，具有SHRINK-ME类的div实际上是一个Angular日历组件，但这个简化的repo产生了相同的效果。我不能像这个示例那样缩放包装的父div，因为我需要使用Bootstrap列网格类来容纳省略此示例中的对象。我是否遗漏了一个简单的CSS属性？

.parent {
  background-color: green;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: scale(.80) translate(-12.5%, -12.5%);
}

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object SHRINK-ME'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

我的代码，带有和不带有变换：

.parent {
  background-color: green;
  width: 40%;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: scale(.80) translate(-12.5%, -12.5%);
}

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

<br> Don't want to see the green parent div, want it to shrink as child is scaled down..

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object SHRINK-ME'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

- Eric Soyke

---

即使删除所有Bootstrap类，问题仍然存在，文档将其视为变换之前的原始印迹大小。根据Mozilla文档：“通过修改坐标空间，CSS变换改变受影响内容的形状和位置，而不会破坏正常的文档流”。我认为我的问题是我确实需要它破坏文档流程。 - Eric Soyke

Answer 1

我错过了 CSS 变换的一个关键部分：它们仅影响视觉呈现，而不影响文档流。因此元素的原始占用空间大小将保持不变。我通过为子元素和兄弟元素设置宽度，然后手动移动兄弟元素以匹配子元素的顶部角来解决这个问题。在调整到小屏幕时需要做更多的工作。

.parent {
  background-color: green;
}

.parent .child-object {
  width: 10em;
  background-color: red;
}

.sibling {
  color: white;
  width: 20em;
  background-color: blue;
}

.SHRINK-ME {
  transform: scale(.80);
}

.TRANSLATE-ME {
  transform: translate(-5%, 10%);
}

<div class='row'>
  <div class='parent SHRINK-ME'>
    <div class='child-object '>CHILD</div>
  </div>
  <div class='sibling TRANSLATE-ME'>SIBLING</div>
</div>

- Eric Soyke