在孩子旋转时更改父div大小

Question

我在其中有块包装器和div。 对于孩子我应用CSS旋转，我希望父div将改变它的宽度和高度 - 子div必须始终在父内（如图片上）。

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

示例必须如何：

Answer 1

严重复制this回复：

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

所以，回答你的问题：

孩子在旋转时可以调整父母吗？不，你不能只用CSS。 （任何知道的人，如果我对此有误，请纠正我。）

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

价： 来自MDN：

  

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

和

  

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