title: Adjusting the container div's size to exactly fit the rendered React component
body: <p>I am trying to render a component whose style and position are determined based on some cases. In order to do that, I am rendering it in a container which occupies the entire body and the component moves inside it. Instead of doing that, how to make sure the styles of container are the same as that of the component? I don't want the container to occupy the entire body, I only want it to occupy the component. </p>
  
  <p>code:</p>
  
  <pre><code>var componentStyle;
  //cases
  componentStyle = {}; //some css properties
  var MyComponent = React.createClass({
  render: function(){
  return(
  &lt;div style = {componentStyle}&gt;Some content&lt;/div&gt;
  )
  }
  })
      var container = document.createElement("div");
  container.id = "container";
  document.body.appendChild(container);
  ReactDOM.render(&lt;MyComponent/&gt;,container);
  </code></pre>
  
  <p>css for container:</p>
  
  <pre><code>#container {
      position: absolute;
      top:0;left: 0;
      font-family: Arial, Helvetica, sans;
      background: transparent;
      height: 100%;
      width: 100%;
      z-index:9999999;
  }
  </code></pre>