[html / css] 要素をスクロールさせる

Question

はじめに

現在、作成しているWebアプリの見た目の実装に関しての質問です

知りたいこと

今実装している画面の一部が下記のような表示になっておりまして、

六番目以降の要素(犬とTest)を五番目の要素の後ろに持っていくような形にし、１行で表示させたいと思っていまして、
オレンジのwidthの範囲で左右にスクロールさせるようにしたいです。

この場合htmlとcssで表示する方法はあるのでしょうか？

完成イメージですが、こちらのリンク先の「人気の占い師」というセクションあたります。

どうぞよろしくお願いします。m(_ _)m

追記

該当のコードを追記します

test.html

<div class="new-users-section">
   <div class="section-title"><b>新着ユーザーさん</b></div>
     <div class="new-users-list">
       <div class="new-user-item">
         <img class="new-user-icon" src="https://www.min-inuzukan.com/images/dog_img_long-chihuahua.jpg?18102302">
         <div class="new-user-name">Test</div>
       </div>
       <div class="new-user-item">
         <img class="new-user-icon" src="https://www.min-inuzukan.com/images/dog_img_long-chihuahua.jpg?18102302">
         <div class="new-user-name">Test</div>
       </div>

test.css

.new-users-section {
    width: 670px;
    margin: 60px auto 0 auto;
}

.section-title {
     width: 95%;
     margin: 0 auto 0 auto;
     font-size: 20px; 
}

.new-users-list {
     height: 130px;
     width: 95%;
     margin: 20px auto 60px auto;
}

.new-user-item {
     width: 120px;
     height: 130px;
     float: left;
}

.new-user-icon {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     display: block;
}

.new-user-name {
     width: 100px;
     margin-left: 0;
     text-align: center;
     margin-top: 5px;
     font-size: 14px;
}

上記の実装についての補足ですが、
上記で話しました、「犬のイメージと、Testのテキスト」を new-user-item として、くくっておりまして、 その親の new-users-list 内で new-user-itemにfloat : left プロパティで持たせて、表示できないかと考えていました。6番目の new-user-item が5番目の new-user-item の右側に回り込まない状況です。

またこちらのリンクを参考に、 overflow-x : scroll を使って実装しようとしましたが、横スクロールにならず縦のスクロールになってしまいました。
https://www.tagindex.com/stylesheet/box/overflow2.html

Comments

[yoshinavi]

方法はいくつかありますので、現在、使用しているHTML・CSSコードを提示されると、回答がつきやすくなると思います。

[yoshinavi]

（追記）質問者さんが自分で考えた対応コードと、上手くいかない箇所の説明等を提示してください。

[akihiro3]

再現したいのですがdivの閉じタグが足りません

Answer 1

下記を追記で解決します

  .new-users-list {
    display: flex;
    overflow-x: scroll;
  }

要素の高さが合ってなかったら調節してくださいね

Comments

[komo_ta]

ありがとうございます！そちらで解決しましたm(_ _)m