Scroll overflowing list of elements horizontally (without line-breaks). CSS-Only.

Scroll-overflowing-list-of-elements-horizontally-(without-line-breaks).md

Scroll overflowing list of elements horizontally (without line-breaks)

Scroll overflowing list of elements horizontally insider a fixed sized container element without elements breaking into a new line.

A Pen by Martin Schubert on CodePen.

License.

Discusstion: http://stackoverflow.com/questions/11477406/horizontal-scrolling-fit-to-content-width?rq=1

Solution: http://jsfiddle.net/kh5k7/1/

smoothdivscroll_playground.haml

.scroll-horizontal
  .no-line-breaks.width-auto
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01
    .inline-block
      item-01

style.scss

.scroll-horizontal{
  overflow-x: scroll;
  overflow-y: hidden;
  
  width:100%;
}

.no-line-breaks{
  white-space:nowrap; 
}

.width-auto{
  width:auto;
}

.inline-block{
    display: inline-block;
    background: red;
}

Hello, great snippet!
This solution is very clean, but do you manage to scroll with mouse wheel ? (it does not work for me with Chrome and Firefox)