Change parent div size when child is rotating

Question

I have block wrapper and div inside it. To child I apply CSS rotate, and I want that parent div will change it width and height - child div must be inside parent always (like on pictures).

#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>

Example: https://jsfiddle.net/y2mw3wxn/

Example how it must be:

example how must be

Really? Did nobody answer this yet? – Asim K T Jun 07 '17 at 07:14 — Asim K T, Jun 07 '17 at 07:14

score 4 · Accepted Answer · answered Jun 07 '17 at 07:23

Heavily copying from this answer:

Basically, when you transform (rotate or scale or any other transform value), you are not touching the normal document flow, you are just changing the visual appearance of that element.

So, to answer your question:

Can we adjust the parent when the child is rotating? No, you can't just by CSS. (Anyone who know, please correct me if I am wrong about this.)

You may need to use JavaScript for the same. Do some calculations and apply width and height style to the parent element.

Ref: from 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.

and

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.

Change parent div size when child is rotating

1 Answers1