bootstrap-4 - 对 child 的CSS缩放变换不影响 parent 的大小

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转换的关键部分:它们不影响文档流，仅影响视觉表示。因此，该元件的原始覆盖区将保留。通过设置 child 和 sibling 的宽度，然后手动将 sibling 移到与 child 的上角相匹配的位置，可以克服这种情况。要适应小屏幕，需要做更多的工作。

.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>