When using flex with nowrap, it appears that the horizontal scroll bar only allows moving to the right while the items on the left remain hidden. To demonstrate this issue, I have created a sample on CodePen: http://codepen.io/anon/pen/QpgvoZ
This behavior is visible in Chrome and Firefox (surprisingly, IE11 seems to be functioning correctly).
I'm curious as to what I might be overlooking here.
Thank you!
@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>