How do I get child elements to scroll with the width of the parent

Question

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

What I am trying to do is get the orange children to extend beyond the right of the parent div. The parent div will be scrollable to the right but NOT up and down. There will be dynamic heights going on with jquery sortable so the children need to stay visible vertically but not horizontally.

Very simple code I have here.

<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

You can add white-space:nowrap; to your parent div.

See this updated Fiddle .