CSS Horizontal DIV scroll -

CSS Horizontal DIV scroll -

i have list of video elements want scroll horizontally if overflow width of container. unfortunately got scroll scroll bar way long.

i want scroll length of content.

demo @ http://jsfiddle.net/d16uh70k/

css

#rtcchatcontainer { /*overflow: auto;*/ overflow-x: scroll; overflow-y: hidden; height: 152px; width: 100%; border: 1px dashed blue; } #rtcchat { display: block; height: 122px; width: 600%; max-width: 600%; border: 1px dashed red; } #rtcchat video { display: inline-block; border: 1px solid black; }

html

<div id="contentwrapper" class="row"> <div class="col-sm-4"> </div> <div class="col-sm-8"> <div id="rtcchatcontainer"> <div id="rtcchat"><video id="rtcmyvideo" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf0" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf1" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf2" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf3" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf4" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf5" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf6" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf7" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf8" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf9" poster="http://i.imgur.com/plrr0w1.png" autoplay="true" muted="true" height="112" width="150"></video></div> </div> </div> </div> <footer></footer> </div>

change #rtcchat following: http://jsfiddle.net/55z6tnl0/.

#rtcchat { height: 122px; white-space: nowrap; }

css scroll overflow