title: Parent div shrinking smaller than width of child table
body: <p>I have a wrapper <code>div</code> with only a fixed height. There are two child <code>div</code>s, both of which are floated to be horizontal. The right-hand child <code>div</code> contains a table. I expect the right-hand <code>div</code> to shrink to the width of the child table. Instead, in cases in which vertical content overflows, the <code>div</code> shrinks to <strong>smaller</strong> than the <code>table</code> (in Firefox and Chrome on Windows; not on Mac b/c the scrollbars are overlaid), which results in horizontal scrollbar appearing. It appears the overflow width is about the same as the scrollbar width, and there is no overflow if the table does not stretch beyond the parent height. The <code>table</code> content is dynamically loaded, so it will change, which is why I want the parent <code>.selector-chapter</code> to stretch in width to match without horizontal scrolling.</p>
  
  <p>You can look at the real thing <a href="http://bible.preahkumpii.com/beta/" rel="nofollow noreferrer">here</a>. Click the book, then any text in the left pane that causes the right pane to overflow (the first line will work).</p>
  
  <p>I have tried everything I can find even closely related on Stack Overflow, including <code>table-layout: fixed</code> and parent <code>display: table</code>.</p>
  
  <p>Any help is appreciated.</p>
  
  <pre><code>&lt;div class='selector'&gt;
      &lt;div class='selector-book'&gt;
          &lt;ul&gt;...&lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class='selector-chapter'&gt;
          &lt;table&gt;
              &lt;tr&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;td&gt;foobar&lt;/td&gt;&lt;/tr&gt;
              ...
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .selector {
      position: fixed;
      top: 55px;
      left: 0px;
      height: 500px;
      box-sizing: border-box;
      padding: 15px;
  }
  .selector-book,
  .selector-chapter {
      overflow: auto;
      white-space: nowrap;
  }
  .selector-book ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }
  .selector-book li {
      padding: 0.5em 1em 0.5em 0;
  }
  .selector-book {
      float: left;  
  }
  .selector-chapter {
      float: right;
  }
  .selector-chapter table td {
      padding: 0.5em;
      text-align: center;
  }
  </code></pre>