在 child 旋转时更改 parent div 大小

Question

我有块包装器和 div 里面。 child 我应用 CSS 旋转，我希望 parent div 会改变它的宽度和高度 - child div 必须在 parent 总是（就像在图片上一样）。

#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

大量复制自this答案：

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

所以，回答你的问题：

可以在child旋转的时候调整parent吗？不，你不能只按 CSS。（有知道的朋友指正，如果我说错了。）

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

参考：来自 MDN：

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

和

By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.

在 child 旋转时更改 parent div 大小

Change parent div size when child is rotating

html

css

transform

rotatetransform