scrolling flex container does not fit centered items [duplicate]

Answer 1

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/