CSS水平DIV滚动

Question

我有一个视频元素列表，如果它们超出容器的宽度，我想水平滚动这些元素。不幸的是我让它滚动了，但是滚动条太长了。

我只想滚动到内容的长度。

演示在 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>

Answer 1

将#RTCChat 更改为以下内容:http://jsfiddle.net/55z6tnL0/ .

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