title: display:table when width of content is more then outer div
body: <p>This one would be simple but couldn't get answer after googling for hours. I have outer div which contains a header div and content div. I have set my content div's height to 100% so that height will adjust as the outer div grows (outer div is user resizable). I achieved this using display:table for outer div and display:table-row for header.
  Now the problem is when the some content (which is dynamic)inside my content div has fixed height and width greater than my outer div, height of the outer div stays perfect However, the width increases. I don't want width to increase instead the width of outer div should stay the same and scroll bars should appear  (already have the property overflow:auto set).</p>
  
  <p>Here is the fiddle <a href="http://jsfiddle.net/SudhirV/9nut9/" rel="nofollow">http://jsfiddle.net/SudhirV/9nut9/</a></p>
  
  <pre><code>    &lt;body&gt;
          &lt;div id="outerDiv"&gt;
              &lt;div id="header"&gt;Header&lt;/div&gt;
              &lt;div id="content"&gt;
                  &lt;div style="width:550px; height:750px;"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
      *
  {
              font-family:Calibri;
              font-size:10pt;
              }
      #outerDiv
      {
          border:1px solid red;
          width:300px;
          height:400px;   
          display:table;      
      }
      #header
      {
          background-color:Gray;
          color:White;
          height:25px;
          vertical-align:middle;
          display:table-row;
          }
          #content
          {
              /*border:1px solid green;*/
              height:100%;
              overflow:auto;
              }
  </code></pre>
  
  <p>Update: I have sorted out the problem by setting the content div's width as inherit.</p>