Divs aren't staying on the same line when width exceeded

Question

I want to get the images (they’re divs) inside the orange div to not go to the next line, and instead have overflow-y to scrolling. The problem is, the 2 last images drop below rather than beside. See the orange div by scrolling down over the bottom images.

The images-wrap is absolutely positioned inside the test-ar div, which somehow adjusts the height of the test-ar div. I thought placing an absolute div inside a relative div won’t resize the relative div, otherwise the relative test-ar div would be the perfect size with a responsive 1/6 aspect ratio maintained.

I’ve tried, maybe incorrectly, setting whitespace to have no wrap, displaying inline, overflow-y, etc but to no avail. Any ideas? Please, no flex!

An explanation would be very helpful here, thanks!

#images-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  position: relative;

  position: static;
}
#main-image {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
  padding-bottom: 53.666%;

  width: 100%;
  padding-bottom: 66.666%;
}
#image-thumbs {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  height: 100%;

  width: 100%;
  margin-left: 0;
  position: absolute;
  height: auto;
  top: 0;
  left: 0;
}
.image-thumb {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding-bottom: 66.666%;

  width: 25%;
  padding-bottom: 16.666%;
  float: left;
}

#test-ar {
  float: left;
  width: 100%;
  height: auto;
  padding-bottom: 16.666%;
  background: orange;
  position: relative;
  overflow-x: scroll;
  /* overflow-y: hidden; */
}

<div id="images-wrap">
  <div id="main-image" style="background-image: url(&quot;https://cml.sad.ukrd.com/image/572806.jpg&quot;);"></div>
  <div id='test-ar'>
    <div id="image-thumbs" style="overflow: hidden;">
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
    </div>
  </div>
</div>

Answer 1

One way to solve it is using flex something like:

#image-thumbs {
  display: flex;
  width: 100%;
  height: 150px;
}
.image-thumb {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
}

Changed only those 2 styles, removed floats and width, you should play with the height to the desired amount.

Or using floats:

#image-thumbs {
  background-color: red;
  width: 100%;
  height: 150px;
}
.image-thumb {
  width: 16.66666%;
  height: 100%;
  background-size: cover;
  background-position: center;
  float: left;  
}

Answer 2

You are setting the width of each .image-thumb to 25% of its parent. Letting only 4 fit the container in a row.

You can use width: calc(100% /6); or width: 16.66%; to fix the layout.

Hope this helps :)

#images-wrap {
  width: 100%;
  height: auto;
  margin-top: 25px;
  float: left;
  position: relative;

  position: static;
}
#main-image {
  width: 80.5%;
  float: left;
  background-size: cover !important;
  background-position: center center !important;
  height: auto;
  padding-bottom: 53.666%;

  width: 100%;
  padding-bottom: 66.666%;
}
#image-thumbs {
  width: 17.5%;
  height: auto;
  float: left;
  margin-left: 2%;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: absolute;
  right: 0;
  height: 100%;

  width: 100%;
  margin-left: 0;
  position: absolute;
  height: auto;
  top: 0;
  left: 0;

}
.image-thumb {
  margin-bottom: 6px;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding-bottom: 66.666%;

  width: calc(100% /6);
  padding-bottom: 16.666%;
  float: left;
}

#test-ar {
  float: left;
  width: 100%;
  height: auto;
  padding-bottom: 16.666%;
  background: orange;
  position: relative;
  overflow-x: scroll;
  /* overflow-y: hidden; */
}

<div id="images-wrap">
  <div id="main-image" style="background-image: url(&quot;https://cml.sad.ukrd.com/image/572806.jpg&quot;);"></div>
  <div id='test-ar'>
    <div id="image-thumbs" style="overflow: hidden;">
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
      <div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
    </div>
  </div>
</div>