Make element width stretch to fit its children when element's parent has overflow: auto;

Question

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.

My HTML:

<div class="bookcase">
    <div class="bookshelf">
        <div class="book">
        <div class="book">
        <div class="book">
    </div>
    <div class="bookshelf">
        <div class="book">
        <div class="book">
        <div class="book">
        <div class="book">
    </div>
    <div class="bookshelf">
        <div class="book">
    </div>
</div>

My CSS:

.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;
}

jsFiddle demo

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.

These pictures illustrate the problem. This is how the bookcase looks normally, which is fine:

or

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:

How can I make the bookshelves take the full width of the overflowed element, rather than the width of the bookcase parent container?

Answer 1

Adding display:table on the .bookcase element does almost what you need.

FIDDLE

The only difference is that instead of the scrollbars appearing when the longest bookshelf > 60% of the viewport width, they appear when the longest bookshelf > 100% of the viewport width.

But the problem with the disappearing background is gone.

Answer 2

Thanks to Javalsu, Hashem Qolami, and Danield for helping me find a suitable solution. Indeed, the trick is to utilize inherent display properties of tables. The solution I found was to wrap the .bookcase in another element (I'm calling this wrapper element the .wall). Move the overflow: auto; with the static height: and width: properties from the .bookcase to the .wall, and add display: table; and width: 100%; to the .bookcase.

The display: table; property is needed for when overflow is scrolling, and the width: 100%; is needed for when the overflow is not scrolling.

My New HTML:

<div class="wall">
    <div class="bookcase">
        <div class="bookshelf">
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
        </div>
        <div class="bookshelf">
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
            <div class="book"></div>
        </div>
        <div class="bookshelf">
            <div class="book"></div>
        </div>
    </div>
</div>

My New CSS:

.wall {
    width: 60%;
    height: 300px;
    margin: 0 auto;
    background: lightgrey;
    overflow: auto;
}
.bookcase {
    display: table;
    width: 100%;
}
.bookshelf {
    background: lightgreen;
    white-space: nowrap;
}
.book {
    display: inline-block;
    height: 60px;
    width: 60px;
    background: pink;
}

jsFiddle demo

Result:
or