How to make div overflow instead of going on new line?

Question

Want to create a slider containing 3 image containers and need all of them in the same row. All image containers are same size, but the size of slider is around 2.5 images, so the third one should overflow instead of going to new row. Example:

How it should look

What i have for now

html

    <div class="image-slide-wrapper">
      <div class="images-section">
        <div class="image-slide">
          <div class="slide-img">
          </div>
        </div>
        <div class="image-slide">
          <div class="slide-img">
          </div>
        </div>
        <div class="image-slide">
         <div class="slide-img">
         </div>
        </div>
      </div>
    </div>

scss

.image-slide-wrapper {
        float: left;
        height: 55%;
        width: 100%;
        .images-section {
          float: left;
          height: 85%;
          width: 100%;
          border: 1px solid grey;
          border-radius: 8px;
          overflow: hidden;
          padding: 0.125rem;
        }
        .image-slide {
          float: left;
          height: 100%;
          width: 100px;
          margin-right: 0.25rem;
          .slide-img {
            float: left;
            height: 100%;
            width: 100%;
            border-radius: 0.35rem;
            background-color: #e9e9e9;

in the text slider is images-section class and image container is image-slide class. Forgot to mention that I have to go with float to make consistent with the rest of the code.

Answer 1

This works. You can add display:flex; and flex-wrap:nowrap; to .image-slide-wrapper class.

    .main {
        float: left;
        height: 85%;
        width: 100%;
        border: 1px solid grey;
        border-radius: 8px;
        overflow: hidden;
        padding: 0.125rem;
        display:flex;
        flex-wrap:nowrap;
    }
    
    .slider {
        float: left;
        height: 100%;
        width: 300px;
        margin-right: 0.25rem;
        display: block;
    }

<div class="main">
  <div class="slider">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
  </div>
  <div class="slider">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
  </div>
  <div class="slider">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBYCs940TLL3tx_nyn7fVeidXWZyfOKV5QrQ&usqp=CAU">
  </div>
  
</div>

Answer 2

You could remove float from the thumb elements and use display: flex and flex-flow: row nowrap on the container

.container {
  height: 100px;
  width: 250px;
  border: 1px solid grey;
  border-radius: 8px;
  overflow: hidden;
  padding: 0.125rem;
  display: flex;
  flex-flow: row nowrap;
}

.image-slide {
  height: calc(100% - .25rem);
  flex: 1 0 100px;
  margin-right: 0.25rem;
  border: 1px #ccc solid;
}

<div class="container">
   <div class="image-slide"></div>
   <div class="image-slide"></div>
   <div class="image-slide"></div>
   <div class="image-slide"></div>  
</div>

Answer 3

<div style="overflow: hidden; width: 250px;">
  <div style="width: max-content">
    <img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
    <img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
    <img style="width: 100px;height: 100px;border: 1px solid black;" src="...">
  </div>
</div>