Div overflow beyond browser width without setting width

Question

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

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 anyway to do this without setting a width to the div?

CodePen demo

The idea is pretty similar to this post: http://stackoverflow.com/questions/9707807/how-to-force-horizontal-scrolling-in-an-html-list-using-css :) — castle, May 09 '14 at 20:49

score 3 · Accepted Answer · answered May 09 '14 at 20:38

3

Add white-space:nowrap to your .carousel div:

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

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

answered May 09 '14 at 20:38

j08691

204,283
31
260
272

score 1 · Answer 2 · answered May 09 '14 at 20:52

Just to complement the other answer, if you want the carousel to scroll horizontally instead of hiding its overflow, you can hide overflow-y and set overflow-x to scroll:

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

Check the example.

Div overflow beyond browser width without setting width

2 Answers2