当子级旋转时更改父级 div 大小

Question

我里面有块包装器和 div 。对于子项，我应用 CSS 旋转，并且我希望父级 div 会更改它的宽度和高度 - 子级 div 必须始终位于父级内部（就像图片上一样）。

#wrap {
  margin-top: 100px;
  width: auto;
  height: auto;
  position: relative;
  border: 1px solid red;
  box-sizing: border-box;
}
#div {
  position: relative;
  top: 0;
  left: 0;
  background-color: green;
  width: 200px;
  height: 80px;
  display: block;
  transform: rotate(120deg);
}

<div id="wrap">
  <div id="div">123</div>
</div>

示例： https: //jsfiddle.net/y2mw3wxn/

示例它必须如何：

Answer 1

大量复制这个答案：

基本上，当您transform（rotate或scale或任何其他transform值）时，您没有接触正常的文档流，您只是在更改该元素的视觉外观。

所以，回答你的问题：

当孩子旋转时我们可以调整父母吗？不，你不能只通过 CSS。（如果我的理解有误，请知道的朋友指正。）

您可能需要使用 JavaScript 来实现同样的目的。进行一些计算并将width样式height应用于父元素。

参考：来自 MDN：

CSS 变换属性允许您修改 CSS 视觉格式化模型的坐标空间。使用它，元素可以根据设置的值进行平移、旋转、缩放和倾斜。

和

通过修改坐标空间，CSS 变换可以更改受影响内容的位置和形状，而不会中断正常的文档流。本指南介绍了如何使用转换。