Horizontal scrolling inside a div

Question

I need to have a horizontal scroller of divs which each div is basically an image uploader.

I have this HTML/CSS code:

.whiteBox {
  background-color: rgba(255, 255, 255, 0.95);
  margin-left: auto;
  margin-right: auto;
  margin-top: 15%;
  padding-top: 1px;
  box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
  overflow: auto;
}

.uploadBox {
  width: 90vw;
}

.uploader {
  background-color: rgb(250, 250, 250);
  width: 39vw;
  height: 25vh;
  margin-left: 4vw;
  margin-top: 4vw;
  box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
  float: left;
  max-height: 200px;
}

<div class="uploadBox whiteBox">
  <h1 class="fontTitle"> Upload Your Photos</h1>
  <hr>

  <div class="uploader boxCorners">
    <div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
      <input type="file" id="imageUpload1">
    </div>
  </div>


  <div class="uploader boxCorners">
    <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
      <input type="file" id="imageUpload2">
    </div>
  </div>

  <!-- many more divs like those goes here.. -->
</div>

I need to get this :

Where the Yellow is a box(div) inside the screen (not the screen )

Answer 1

Just add this style mentioned class

.uploadBox {display: flex;overflow-x: scroll;}

Answer 2

Wrap the upload buttons inside a div and give div these properties overflow-x: scroll; display:flex;

.whiteBox
{
  background-color:  rgba(255,255,255,0.95);
  margin-left: auto;
  margin-right: auto;
  margin-top: 15%;
  padding-top: 1px;
  box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
}

.scroller{
      overflow-x: scroll;
      display:flex;
}

.uploadBox
{
   width: 90vw;
}

.uploader
{

  background-color: rgb(250,250,250);
      width: 52vw;
  height: 25vh;
  margin-left:4vw;
  margin-top: 4vw;
  box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
  float: left;
  max-height: 200px;


}

<div class="uploadBox whiteBox">
                <h1 class="fontTitle" > Upload Your Photos</h1>
                <hr>
<div class="scroller">


                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
                       <input type="file" id="imageUpload1">
                       </div>
                </div>


                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
                                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
                                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
                                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
</div>

Answer 3

You mean like this?

.whiteBox
{
  background-color:  rgba(255,255,255,0.95);
  margin-left: auto;
  margin-right: auto;
  padding-top: 1px;
  box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
}

.uploadBox
{
   display: flex;
}

.uploader
{
  flex: 0 0 auto;
  background-color: rgb(250,250,250);
  width: 39vw;
  height: 25vh;
  margin-left:4vw;
  margin-top: 4vw;
  box-shadow: 0 4px 8px 0 rgba(230, 230, 230, 0.2), 0 6px 20px 0 rgba(230, 230, 230, 0.2);
  float: left;
  max-height: 200px;
}

<h1 class="fontTitle" > Upload Your Photos</h1>
<div class="uploadBox whiteBox">
                <hr>

                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview1" style="background-image: url(https://picsum.photos/200/300);">
                       <input type="file" id="imageUpload1">
                       </div>
                </div>


                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
                
                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
                
                <div class="uploader boxCorners">
                       <div class="imagePreview boxCorners" id="imagePreview2" style="background-image: url(https://picsum.photos/600/300);">
                       <input type="file" id="imageUpload2">
                       </div>
                </div>
</div>

Achieved by the following modifications of your code:

• Move h1 outside of .uploadBox
• Remove width from .uploadBox, add display: flex; instead
• Add flex: 0 0 auto; on .uploader