nowrapでフレックスのスクロール動作

Question

フレックスをnowrapで使用すると、スクロールバーでは右に移動できますが、左のアイテムは非表示のままです。 問題を表示するためのdoceopenの例を作成しました。 http://codepen.io/anon/pen/QpgvoZ

以下のケースでは、水平スクロールバーは右側にしか動作しませんが、左側のアイテムは単に隠されており、到達できません。 ChromeとFFでこの現象が発生しました（IE11が正常に動作しているようです：-O）

ここで私が迷うことはありますか？

ありがとうございます！

@import "compass/css3"; 
 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row nowrap; 
 
    justify-content: space-around; 
 
} 
 

 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    min-width: 200px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    flex-shrink: 0; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">111111</li> 
 
    <li class="flex-item">222222</li> 
 
    <li class="flex-item">333333</li> 
 
    <li class="flex-item">444444</li> 
 
    <li class="flex-item">555555</li> 
 
    <li class="flex-item">666666</li> 
 
    <li class="flex-item">777777</li> 
 
    <li class="flex-item">888888</li> 
 
    <li class="flex-item">999999</li> 
 
</ul>

Answer 1

あなたは

-webkit-flex-flow: row nowrap; 
justify-content: space-around; 

を削除し、あなたの問題