```css
#overflowbox {
  overflow: scroll;
  height: 150px;
  width: 300px;
  white-space: nowrap;
}

img {
  float: left; /* Removing the line fixes the issue & images are on a single line,
                  but I need to keep it to remove the vertical space between images.
                  Using 'font-size: 0' didn't work. */
}
```

```html
<div id="overflowbox">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100"><br> <!-- It should go on next line from here -->
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
  <img src="http://via.placeholder.com/100x100">
</div>
<!-- The images should be on a single line -->
```

After some time, I finally found out why my code didn't work. What I tried to do was to have a line of images that were on a single line and made the container they were in overflow. But somewhy, setting a `float: left` property to the images breaks it, but I need to keep the property in order to remove the vertical space between the images.

Is there some alternative way of doing this to make it work or some kind of a fix?