I wanted a number of items, centered horizontally in a container, and when there are too many items to fit, the items should overflow the container, from left to right (first item flush with the left hand side of the container, overflowing items go off the right).

Here is where I started:

The problem

<div class="container">
    <div class="thing">item1</div>
    <div class="thing">item2</div>
    <div class="thing">item3</div>
    <div class="thing">item4</div>
    <div class="thing">item5</div>
    <div class="thing">item6</div>
    <div class="thing">item7</div>
    <div class="thing">item8</div>
    <div class="thing">item9</div>
    <div class="thing">item10</div>
    <div class="thing">item11</div>
    <div class="thing">item12</div>
</div>

And here was the CSS:

.container {
    width: 360px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    overflow: auto;
}

.thing {
    font-size: 14px;
    font-weight: 700;
}

And here is a Codepen of just that. Notice how item1 is missing to the left and you can’t scroll left (at least on desktop, you can’t) to get to it? Technically, in the CSS specifications, this is referred to as ‘data loss’.

See the Pen Centre items until they overflow, then left align 2 by Ben Frain (@benfrain) on CodePen.

That’s because by default, with justify-content: center distributed alignment is not doing what we would like. Other alignments will, but not center. This very situation is described in the specs: https://www.w3.org/TR/css-align-3/#overflow-values and a lovely solution is provided: overflow-position: safe; but there is a catch; it isn’t implemented anywhere yet.

The simple solution for now

However, while you can’t do it cleanly with just CSS, you can fix the problem easy enough with an extra element to wrap the contents, and give it margin: auto on the sides.

If you just came here for a working approach, be on your way weary coder, as at the time of writing, this is the easiest solution I have found.

Here you go:

See the Pen Centre items until they overflow, then left align 2 by Ben Frain (@benfrain) on CodePen.

If for some reason that extra inner element is problematic, for example you need to do something different at a different viewport size, remember you can always make it seem like it doesn’t exist by making it display: contents;.