CSS 子级缩放变换不影响父级大小

Question

我有一个太大的组件，我想缩小它。我可以通过缩放变换来做到这一点，但父容器不会缩小以适合。

在我的真实代码中，带有 SHRINK-ME class 的 div 实际上是一个 Angular 日历组件，但是这个简化的 repo 重现了相同的效果。我不能只缩放包装父级 div，因为我需要使用 Bootstrap 列网格 classes 来容纳此示例中省略的对象。我在这里错过了一个简单的 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 和同级上设置宽度来克服，然后手动移动同级以匹配 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>

CSS 子级缩放变换不影响父级大小

CSS Scale transform on child not affecting parent size

css-transforms

bootstrap-4