对不影响父级大小的子级进行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>

Answer 1

我错过了CSS转换的关键部分：它们不影响文档流，只影响可视化表示。因此，元素的原始足迹将保留。我能够通过设置孩子和兄弟姐妹的宽度来克服，然后手动移动兄弟姐妹以匹配孩子的上角。它需要做更多的工作才能适应小屏幕。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;