2

It seems that when using flex with nowrap - the scroll bar allows moving only to the right but the items on the left remain hidden. I've created a doceopen example to show the problem. http://codepen.io/anon/pen/QpgvoZ

In the following case, it seems that the horizontal scroll bar only works to the right but the items on the left are simply hidden and not reachable. I see this behavior in Chrome and FF (IE11 seems to be working properly :-O )

What I'm missing here?

Thanks!

@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>
chirag
  • 1,761
  • 1
  • 17
  • 33
user1034092
  • 67
  • 1
  • 5

1 Answers1

1

can you remove 

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

and add overflow-x:auto; to .flex-container it seems like solves your problem

necilAlbayrak
  • 824
  • 6
  • 9
  • 1
    well... it solves the problem since removing justify-content: space-around; means that it uses the default value for justify-content which is flex-start, so we just get a different behavior and not a solution. removing -webkit-flex-flow: row nowrap; has no effect since these are the default values. – user1034092 Mar 13 '17 at 16:14