Overflow-x scroll only on a parent div with a fixed height and unknown number of children

Question

If I have a parent and child div:

<div class="parent">
    <div class="content child">1</div>
</div>

The parent div has:

• a fixed height(just over the height of one child)
• a max width(some %)

The content children will be:

• all the same size
• start with one child
• more children will be added, but each child is to be to the right of the last child, therefore, only allow for x scrolling

What CSS is needed on the parent, and each child?

Here is a fiddle with my best attempt.

Answer 1

Using flexbox:

.parent {
    display: flex;
    overflow-x: scroll;
}

.content {
    display: block;
}

Answer 2

To have all elements in a single line you need to make the child elements display inline-block and disable wrapping of white space on the parent

.parent {
    max-width: 50%;
    overflow-x: scroll;
    white-space: nowrap;
}

.content {
    display: inline-block;
}

Example fiddle