title: Expanding parent div to child size when larger than page width
body: <p>A parent div must completely contain the contents to a child div.  Due to an odd circumstance, that child div might be wider than the page view itself.  Problem being, the parent div seems to always be limited to the page width, no matter what it contains.</p>
  
  <p><a href="http://jsfiddle.net/e5Lkq/1/" rel="nofollow">http://jsfiddle.net/e5Lkq/1/</a></p>
  
  <p>contains:</p>
  
  <pre><code>&lt;div class="outer clearfix"&gt;
      &lt;div class="inner"&gt;Oversized content here.&lt;/div&gt;
  &lt;/div&gt;
  
  .inner{
      background-color:red;
      height:50px;
      width:1800px;
  }
  
  .outer{
      border:5px solid blue;
      /* overflow:hidden; */
  }
  
  .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  </code></pre>
  
  <p>In this example, I need the outer div (with the blue border) to expand around the child's contents.</p>
  
  <p>I've come across this problem before - something about a quirky rendering of the "body" style - but I've been unable to locate similar questions again this time.   Setting overflow to hidden for the parent just cuts off the child element.  I could always throw in a js to to resize after loading, but I'd rather avoid this.  Any thoughts?</p>
  
  <p>Thanks,
  Jeremy</p>
  
  <p>PS I see this similar item, but the answer is jquery.  This might just have to be the way of it:
  <a href="https://stackoverflow.com/questions/8360465/expand-parent-div-width-to-fit-children-divs-horzontal-scroll-website">https://stackoverflow.com/questions/8360465/expand-parent-div-width-to-fit-children-divs-horzontal-scroll-website</a></p>