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

in simplified example, have bookcase books sitting on bookshelves. bookcase outermost element defined width. books on bookshelf supposed appear left right without wrapping. bookshelf supposed stretch width show books on shelf. bookshelves need same width, width of 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 current code when bookcase width smaller longest bookshelf , bookcase makes overflow scrollable, bookshelf elements don’t stretch fit books. shelves appear defining width equal parent, bookcase.

these pictures illustrate problem. how bookcase looks normally, fine:

or

but when scroll right when bookcase narrow, bookshelves’ green background cut off, instead of reaching right side of last red book:

how can make bookshelves take full width of overflowed element, rather width of bookcase parent container?

thanks javalsu, hashem qolami, , danield helping me find suitable solution. indeed, trick utilize inherent display properties of tables. solution found wrap .bookcase in element (i'm calling wrapper element .wall). move overflow: auto; static height: , width: properties .bookcase .wall, , add display: table; , width: 100%; .bookcase.

the display: table; property needed when overflow scrolling, , width: 100%; needed when overflow 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