Overflow-x not working

Once you've floated the elements, you've taken them out the document flow and it won't be calculated in the parent's width. You have to use a combination of display: inline-block on the items instead of float, and then use white-space: nowrap on the parent.

#testDiv{
  width: 400px;
  overflow-x: auto;
  border:1px solid black;
  white-space: nowrap; 
  font-size: 0;
}
.testimgdiv{
  width: 120px;
  height: 100px;
  display: inline-block;
}

Fiddle

Note: I'm using font-size: 0 to make the items appear right next to each other.

UPDATE

As this post is quite old, it's probably worth noting that this can be done with less code using flexbox (depending on the browser support level required):

#testDiv {
  width: 400px;
  display: flex;
  overflow-x: auto;
}

.testimgdiv {
  width: 120px;
  height: 100px;
  flex: 0 0 auto;
}
<div id="testDiv">
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
</div>

Tags:

Css

Scroll

Recent Posts