CODEWITHSUNDEEP
htmlcss
Adjit
Adjit

Reputation: 10305

Div overflow beyond browser width without setting width

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

Upvotes: 4

Views: 753

Answers (2)

Renato
Renato

Reputation: 983

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.

Upvotes: 1

j08691
j08691

Reputation: 208032

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

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

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

Upvotes: 3

Related Questions