Div débordement au-delà de la largeur du navigateur sans définir la largeur

Question

Je suis en train de créer un div où au lieu des images à l'intérieur de passer à la ligne suivante, il ne cesse de déborder au-delà de la largeur du navigateur.

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; 
} 

est-il de toute façon de le faire sans fixer une largeur à la div?

CodePen demo

Answer 1

Ajouter white-space:nowrap à votre .carousel div:

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

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

Answer 2

Juste pour compléter l'autre réponse, si vous voulez que le carrousel pour faire défiler horizontalement au lieu de cacher son trop-plein, vous peut masquer overflow-y et définir overflow-x pour faire défiler:

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

Check the example.