title: Not Specifying CSS Width in Chrome Causing Div Resizing Issue
body: <p>I have this setup:</p>
  
  <pre><code>&lt;div id="appBody"&gt;
       &lt;div id="appLeftPane"&gt;
           &lt;div id="resizer"&gt;
  
           &lt;/div&gt;
       &lt;/div&gt;
       &lt;div id="appRightPane"&gt;
  
       &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>The <code>resizer</code> is tied to a jQuery resizing function.</p>
  
  <p>CSS:</p>
  
  <pre><code>#appBody {
      float: left;
      min-height: 650px;
      height: 100%;
      min-width: 1200px;
      background: #fefefe;
  }
  
  #appLeftPane {
      float: left;
      height: 100%;
      background-color: #fefefe;
      padding: 0;
      vertical-align: top;
  }
  
  #appRightPane {
      height: 100%;
      min-height: 650px;
      padding: 5px 5px 5px 10px;
      border-left: 1px solid #cecece;
      white-space: nowrap;
      overflow-y: auto;
      overflow-x: scroll;
  }
  
  #resizer {
      width:300px; 
      height:100%; 
      min-height: 650px; 
      float: left;   
  }
  </code></pre>
  
  <p>The content on the left side is kept in that <code>div</code> (not <code>#appLeftPane</code>).  When you resize the content to the right, thereby shrinking the <code>#appRightPane</code> <code>div</code>, I have it set to <code>overflow:auto</code>.  This works to the effect on all browsers except for Chrome for Windows. </p>
  
  <p>On Chrome, because I did not set a width on the <code>#appRightPane</code>, it is only about 100px wide, the rest is hidden.  All the other browsers sets that div to 100% of the remaining width.</p>
  
  <p>If I remove the overflow properties, then it DOES show in Chrome, but in Chrome and all the rest of the browsers, the entire div bumps below the left div which is bad. (Same thing happens when I try to set a width or min-width).</p>
  
  <p>Can anyone see what is happening?</p>