How to force parent div to resize to contain child div with CSS rotary?

Question

The title says everything: "How do I get the parent div to resize to contain a child div with CSS rotary?"

This is what I get now:

HTML:

<div id="container">
    <div id="rotator">
        <h1>TEXT</h1>
    </div>
</div>

CSS

#container {
  display: inline-block;
  border: 1px solid gray;
  padding: 10px;
  overflow: hidden;
}

#rotator {
  display: inline-block;
  width: 200px;
  height: 500px;
  background-color: rgb(130, 310, 130);
  border: 1px solid blue;
  text-align: center;
  line-height: 500px;

  -moz-transform:rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

Living example

So, is there a way to make a parent size with a child? It would be best to use only a CSS solution. If this is not possible, what is the best way for javascript to do this? Must be supported by IE9

Based on @misterManSam's suggestion I am updating a live example to show a solution. found here

Answer 1

div.container . #rotator.deg90 CSS.

:)

Javascript

function to90() {
   var elm = document.getElementById("rotator");
   console.log(elm);
   elm.className = "deg90";

//add these lines
   document.getElementById('container').style.width = "500px";
   document.getElementById('container').style.height = "200px";
}

CSS

#rotator.deg90 {
  /*add this*/
  margin-top: -150px;
  margin-left: 200px;

 -moz-transform:rotate(90deg);
 -webkit-transform: rotate(90deg);
 -o-transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 transform:rotate(90deg);
}

Answer 2

: http://jsbin.com/viyacaji/11/edit

jS-, div-. , , , div.

?