scrolling flex container does not fit centered items [duplicate]

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/

Answer 2

try with style sheet

    #container {
        background-color: green;
        display: flex;
        /* justify-content: center */ ;
        align-items: center;
        overflow: auto;
    }
    .item {
        background-color: white;
        border: 1px solid black;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        min-width: 200px;
        max-width: 300px;
        margin: auto;
    }
    

I removed justify-content, making it to the default flex-start. And, added margin:auto which seems that it makes center alignment.

Updated Demo: http://jsfiddle.net/FTKcQ/1/