Как расположить несколько div в одну строку с возможностью прокрутки

Есть следующая проблема. Нужно расположить несколько div-ов в одном div с возможностью прокрутки. То-есть, например: Имеется главный div фиксированной ширины, предположим 1200px. И несколько div-ов находящихся в нём шириной 450px. Как сделать так, что-бы если общая ширина внутренних div-ов превышала ширину главного они не выходи за края и не сжимались, (была такое, когда пытался устранить проблему путём экспериментов с display.) а как бы скрывались за край. При этом что-бы была полоса прокрутки. Когда пытался осуществить задуманное полоса прокрутки была, но ползунка не было.

Заранее спасибо.


Ответы (1 шт):

Автор решения: Sergey

Так?

<div style="border: 1px solid black; width: 300px; overflow: auto;">
  <div style="white-space: nowrap;">
    <div style="display: inline-block">div-1</div>
    <div style="display: inline-block">div-2</div>
    <div style="display: inline-block">div-3</div>
    <div style="display: inline-block">div-4</div>
    <div style="display: inline-block">div-5</div>
    <div style="display: inline-block">div-6</div>
    <div style="display: inline-block">div-7</div>
    <div style="display: inline-block">div-8</div>
    <div style="display: inline-block">div-9</div>
    <div style="display: inline-block">div-10</div>
  </div>
</div>

→ Ссылка