css - 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.

question from:https://stackoverflow.com/questions/65842989/how-to-make-div-overflow-instead-of-going-on-new-line

Answer 1

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