scrolling flex container does not fit centered items [duplicate]

Question

HTML:

<div id="container">
    <div class="item">Foo</div>
    <div class="item">Bar</div>
</div>

CSS:

#container {
    display: flex;
    justify-content: center;
    overflow: auto;
}
.item {
    flex-grow: 1;
    min-width: 200px;
    max-width: 300px;
}

When the above container shrinks to less than 400px, a horizontal scroll bar appears as expected. However, the first item becomes partially obscured by the left edge of the container, even when scrolled all the way to the left. As the container shrinks, more of the item is obscured.

Demo: http://jsfiddle.net/FTKcQ/. Resize result frame to observe. Tested in Chrome 30 and Firefox 24.

If justify-content is changed from center to to any other value (e.g. space-between), then all content is visible by scrolling. Why do centered items behave differently?

The goal here is to have a row of centered items, each of which will grow in width between some range. If the container cannot fit all minimal-width items, it should scroll to display them all.

Answer 1

According to MDN (Flex item considerations), this behavior is expected for now:

Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge, as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well.

For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container.

So, you can achieve then expected result, using margins for alignment. Just add margin-left: auto for first item and margin-right:auto for last.

My demo: http://jsfiddle.net/WFxQk/