子旋转时更改父 div 大小

【问题标题】：Change parent div size when child is rotating子旋转时更改父 div 大小
【发布时间】：2016-09-18 22:16:41
【问题描述】：

我里面有块包装器和 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/

举例说明：

【问题讨论】：

真的吗？还没有人回答吗？

标签： html css transform rotatetransform

【解决方案1】：

大量抄袭this答案：

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

所以，回答你的问题：

当孩子旋转时我们可以调整父母吗？不，你不能只通过 CSS。（谁知道，如果我在这方面有错误，请纠正我。）

您可能需要使用 JavaScript。进行一些计算并将width 和height 样式应用于父元素。

参考：来自 MDN：

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

和

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

【讨论】：