Change parent div size when child is rotating
<p>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).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrap"&gt;
  &lt;div id="div"&gt;123&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Example: <a href="https://jsfiddle.net/y2mw3wxn/" rel="noreferrer">https://jsfiddle.net/y2mw3wxn/</a></p>

<p>Example how it must be:</p>

<p><img src="https://i.stack.imgur.com/tkCjS.png" alt="example how must be"></p>