要素の親がオーバーフローした場合、要素の幅をその子要素に合わせて拡大します。

Question

この簡略化した例では、本棚に本を置いた本棚を持っています。ブックケースは、定義された幅を持つ最も外側の要素です。本棚の本は、ラッピングなしで左から右に表示されるはずです。本棚は、その棚のすべての本を表示するために幅を伸ばすことになっています。すべての本棚は同じ幅、幅の広い本棚の幅にする必要があります。

マイ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> 

マイ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

現在のコードに問題が本棚幅が最も長い本棚よりも小さい場合ということで、ブックシェルフはオーバーフローをスクロール可能にし、ブックシェルフ要素はすべてのブックに適合するように伸びません。現在のところ、棚は親の本棚と同じ幅を定義しているようです。

これらの図は、この問題を示しています。

または

しかし、本棚が狭い場合には、あなたが右にスクロールするとき、本棚緑の背景にはカットオフ、代わりのに達している：これは罰金である、本棚が通常どのように見えるかです最後の赤い本の右側：

がどのように私は本棚がオーバーフローした要素の全幅はなく、本棚の親コンテナの幅を取ることができますか？

Answer 1

Javalsu、Hashem Qolami、Danieldのおかげで、私は適切な解決策を見つけるのを手伝ってくれました。確かに、このトリックはテーブルの固有の表示特性を利用することです。私が見つけた解決策は、別の要素に.bookcaseをラップすることでした（私はこのラッパー要素を.wallと呼んでいます）。固定height:とwidth:のプロパティを持つoverflow: auto;を.bookcaseから.wallに移動し、display: table;とwidth: 100%;を.bookcaseに追加します。

オーバーフローがスクロールするときには、display: table;プロパティが必要で、オーバーフローがスクロールしないときには、width: 100%;が必要です。

私の新しい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> 

私の新しい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

結果：
または

Answer 2

.bookcase要素にdisplay:tableを追加すると、がほぼになります。

FIDDLE

唯一の違い

は、ビューポートの幅の最も長い本棚> 60％は、彼らが表示されたときに代わりスクロールバーで現れることがある場合、ビューポートの幅の最も長い本棚> 100％。

しかし、消えている背景の問題はなくなりました。

Answer 3

あなたの問題はあなたが.bookcaseで幅を宣言し、各ブックシェルフがその幅を継承するということです。ブックケースと各ブックシェルフが常に最も幅の広いブックの幅になるようにするには、.bookcaseのdisplay：inline-blockを設定し、その幅ルールを削除します。それを中心にする必要がある場合は、margin：0 auto以外の方法を見つける必要があります。