title: Make element width stretch to fit its children when element's parent has overflow: auto;
body: <p>In this simplified example, I have a bookcase with books sitting on bookshelves. The bookcase is the outermost element with a defined width. The books on a bookshelf are supposed to appear left to right without wrapping. The bookshelf is supposed to stretch its width to show all the books on its shelf. All bookshelves need to be the same width, the width of the widest bookshelf.</p>
  
  <p>My HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="bookcase"&gt;
      &lt;div class="bookshelf"&gt;
          &lt;div class="book"&gt;
          &lt;div class="book"&gt;
          &lt;div class="book"&gt;
      &lt;/div&gt;
      &lt;div class="bookshelf"&gt;
          &lt;div class="book"&gt;
          &lt;div class="book"&gt;
          &lt;div class="book"&gt;
          &lt;div class="book"&gt;
      &lt;/div&gt;
      &lt;div class="bookshelf"&gt;
          &lt;div class="book"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.bookcase {
      width: 40%;
      height: 300px;
      margin: 0 auto;
      background: lightgrey;
      overflow-x: auto;
  }
  .bookshelf {
      background: lightgreen;
      white-space: nowrap;
  }
  .book {
      display: inline-block;
      height: 60px;
      width: 60px;
      background: pink;
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/gr9rg/3/" rel="noreferrer">jsFiddle demo</a></strong></p>
  
  <p>The problem with the current code is that when the bookcase width is smaller than the longest bookshelf and the bookcase makes the overflow scrollable, the bookshelf elements don’t stretch to fit all the books. Currently the shelves appear to be defining their width equal to the parent, the bookcase.</p>
  
  <p>These pictures illustrate the problem. This is how the bookcase looks normally, which is fine:</p>
  
  <p><img src="https://i.stack.imgur.com/n8v8U.png" alt="looks good scrolled left with narrow bookcase">
  or
  <img src="https://i.stack.imgur.com/0RVRx.png" alt="looks good with wide bookcase"></p>
  
  <p>But when you scroll right when the bookcase is narrow, the bookshelves’ green background is cut off, instead of reaching to the right side of the last red book:</p>
  
  <p><img src="https://i.stack.imgur.com/mrYjt.png" alt="bookshelf background is missing when you scroll right with narrow bookcase"></p>
  
  <p>How can I make the bookshelves take the full width of the overflowed element, rather than the width of the bookcase parent container?</p>