Scroll-flex Behälter passt nicht Elemente zentriert

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; 
} 

Wenn der obige Behälter auf weniger als 400px schrumpft, eine horizontale Bildlaufleiste angezeigt, wie erwartet. Das erste Objekt wird jedoch teilweise durch die linke Kante des Containers verdeckt, selbst wenn es ganz nach links gescrollt wird. Wenn der Behälter schrumpft, wird mehr von dem Gegenstand verdeckt.

Demo: http://jsfiddle.net/FTKcQ/. Resize Ergebnis-Frame zu beobachten. Getestet in Chrome 30 und Firefox 24.

Wenn justify-content von center zu einem anderen Wert (z. B. space-between) geändert wird, dann ist der gesamte Inhalt durch Scrollen sichtbar. Warum verhalten sich zentrierte Objekte anders?

Das Ziel ist es, eine Reihe von zentrierten Elementen zu haben, von denen jede in der Breite zwischen einigen Bereichen wachsen wird. Wenn der Container nicht alle Elemente mit minimaler Breite aufnehmen kann, sollte ein Bildlauf erfolgen, damit alle Objekte angezeigt werden.

Answer 1

Nach MDN (Flex item considerations), dieses Verhalten jetzt erwartet wird:

Flexbox die Ausrichtungseigenschaften tun "true" Zentrierung, im Gegensatz zu anderen Methoden Zentrieren in CSS. Dies bedeutet, dass die Flex-Elemente zentriert bleiben, auch wenn sie den Flex-Container überlaufen. Dies kann jedoch manchmal problematisch sein, wenn sie über den oberen Rand der Seite oder den linken Rand überlaufen, da Sie nicht zu diesem Bereich scrollen können, selbst wenn dort Inhalt vorhanden ist! In einer zukünftigen Version werden die Ausrichtungseigenschaften erweitert, um auch eine "sichere" Option zu haben.

Wenn dies ein Problem ist, können Sie stattdessen Ränder verwenden, um Zentrierung zu erreichen, da sie auf "sichere" Weise reagieren und die Zentrierung stoppen, wenn sie überlaufen. Anstatt die align-properties zu verwenden, setzen Sie einfach automatische Ränder auf die Flex-Elemente, die Sie zentrieren möchten. Setzen Sie anstelle der justify-properties automatische Ränder auf die äußeren Kanten der ersten und letzten Flex-Elemente im Flex-Container.

So können Sie dann erwartetes Ergebnis erreichen, die Ränder für die Ausrichtung verwenden. Fügen Sie einfach margin-left: auto für den ersten Artikel und margin-right:auto für den letzten hinzu.

Meine Demo: http://jsfiddle.net/WFxQk/

Answer 2

versuchen mit Stylesheet

 
    #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 justify-content entfernt, um es in den flex-start Standard zu machen. Und, fügte margin:auto hinzu, das scheint, dass es Mittenausrichtung macht.

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