Aumenta la larghezza dell'elemento per adattarla ai suoi figli quando l'elemento principale dell'elemento ha overflow: auto;

Question

In questo esempio semplificato, ho una libreria con libri seduti sugli scaffali. La libreria è l'elemento più esterno con una larghezza definita. I libri su una libreria dovrebbero apparire da sinistra a destra senza avvolgere. La libreria dovrebbe allungare la sua larghezza per mostrare tutti i libri sullo scaffale. Tutti gli scaffali devono avere la stessa larghezza, la larghezza della libreria più ampia.

mio 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> 

mio 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

Il problema con il codice attuale è che quando la larghezza libreria è più piccola la libreria più lunga e la libreria fa scorrere l'overflow, gli elementi della libreria non si allungano per adattarsi a tutti i libri. Attualmente gli scaffali sembrano definire la loro larghezza uguale al genitore, la libreria.

Queste immagini illustrano il problema. Questo è come la libreria appare normalmente, che va bene:

o

Ma quando si scorre a destra quando la libreria è stretta, sfondo verde gli scaffali è tagliato fuori, invece di raggiungere al lato destro dell'ultimo libro rosso:

Come posso fare gli scaffali prendono l'intera larghezza dell'elemento in overflow, piuttosto che la larghezza del contenitore principale libreria?

Answer 1

Grazie a Javalsu, Hashem Qolami e Danield per avermi aiutato a trovare una soluzione adeguata. In effetti, il trucco consiste nell'utilizzare proprietà di visualizzazione intrinseche delle tabelle. La soluzione che ho trovato era di avvolgere il .bookcase in un altro elemento (sto chiamando questo elemento wrapper il .wall). Spostare overflow: auto; con le proprietà statiche height: e width: da .bookcase a .wall e aggiungere display: table; e width: 100%; a .bookcase.

La proprietà display: table; è necessaria per lo scorrimento in eccesso e lo width: 100%; è necessario quando l'overflow non scorre.

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

Risultato:
o

Answer 2

Aggiunta display:table sull'elemento .bookcase fa quasi quello che ti serve.

FIDDLE

L'unica differenza è che al posto delle barre di scorrimento che appaiono quando la più lunga libreria> 60% della larghezza della vista, appaiono quando la più lunga libreria> 100% della larghezza finestra.

Ma il problema con lo sfondo a scomparsa è scomparso.

Answer 3

il tuo problema è che hai dichiarato una larghezza su .bookcase, e ogni scaffale erediterà quella larghezza. Se vuoi che la libreria e ogni scaffale siano sempre la larghezza della più ampia fila di libri, imposta display: inline-block su .bookcase e rimuovi la sua larghezza. Se ti serve centrato, dovrai trovare un modo diverso dal margine: 0 auto.