Div overflow beyond browser width without setting width

Question

I am trying to create a div where instead of images moving to the next line, it just overflows beyond the width of the browser.

HTML markup:

<div class="carousel">
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
  <img src="http://placehold.it/200x200"/>
</div>

CSS

.carousel {
  overflow: scroll;
  overflow-x: hidden;
}
.carousel img{
  display: inline-block;
}

Is there a way to do this without setting the width in the div?

CodePen Demo

Answer 1

Add white-space:nowrapto your .carouseldiv:

.carousel {
  overflow: scroll;
  overflow-x: hidden;
  white-space:nowrap;
}

http://codepen.io/anon/pen/iCqtc

Answer 2

To complement another answer, if you want the carousel to scroll horizontally rather than hide its overflow, you can hide overflow-yand set overflow-xto scroll:

.carousel
{
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
}

Check out the example.