html - オーバーフロー x とブロック要素

Question

内部に他の div を含む div が必要です。この div は、ページの最大幅に達し、スクロールバーを表示する必要があります。私はすでにインライン要素でそのようなことを認識しています（<img>や<span>のようなものですが、ブロック要素で同じものを取得する方法がわかりません.

以前はインライン要素を使用していました。

<div class="slider">
  <img src="image.png" />
  <img src="image.png" />
  <img src="image.png" />
  <img src="image.png" />
  <img src="image.png" />
</div>

CSS:

.slider{
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
}

次のように、ブロック要素で同じことを行うと:

<div class="slider">
  <div class="content"></div>
  <div class="content"></div>
</div>

コンテンツはスライドしませんが、新しい行を作成し、ページ内で垂直に続きます。助言がありますか？

CSS:

.content{
  float: left;
  width: 250px;
  height: 250px;
}

編集:構造はより似ています:

<div class="slider">
  <div class="content">
     <div class="content2"></div>
  </div>
  <div class="content">
     <div class="content2"></div>
  </div>
</div>

重要ではないと思ったので省略しましたが、おそらく間違っていました。