如何使用父元素的宽度滚动子元素

Question

https://jsfiddle.net/9L503yyk/1/

我想要做的是让橙色的孩子延伸到父div的右边。父div可以向右滚动但不能向上和向下滚动。 jquery可以进行动态高度排序，因此孩子们需要保持垂直而不是水平可见。

我在这里的代码非常简单。

<div class="parent">
    <div class="child">asdf</div>
    <div class="child">asdf</div>
    <div class="child">asdf</div>
    <div class="child">asdf</div>
    <div class="child">asdf</div>
    <div class="child">asdf</div>
    <div class="child">asdf</div>
    <div class="child">asdf</div>
</div>

.parent {
    overflow-x: scroll;
}
.child {
    display: inline-block;
    width: 200px;
    background: orange;
    margin: 5px;
    box-sizing: border-box;
}

Answer 1

您可以将white-space:nowrap;添加到您的父div。

请参阅此更新Fiddle。