issue with horizontal scrolling div using flexbox

Question

I am using flexbox css to make a container with number of divs to scroll horizontally but the problem is when I try to add more divs to the container, it moves to the left side and the divs left to the display are hidden.

I don't understand what's happening here is the code snippet and codepen

.scroll{
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: space-evenly;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 150px;
  margin: 10px;
}

<div class="scroll">
  <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
</div>

Thank you

Answer 1

The main issue here is that for some justify-content values, the overflow distribution will overflow the flex parent at both its left and right edge.

• https://www.w3.org/TR/css-align-3/#distribution-values

Therefor a new keyword has been introduced, safe, where one can control how that overflow should behave.

• https://www.w3.org/TR/css-align-3/#overflow-values

As this is a quite new addition to the Flexbox model, it won't work cross browsers yet, nor does space-evenly.

When it does (and for browsers that support it), this CSS line will fix the issue

justify-content: space-evenly safe;

---

A possible workaround, to achieve both evenly spaced items when they won't fill their parent, and only overflow at the right edge when too many, could be to use auto margins.

Stack snippet

.scroll{
  display: flex;
  /*flex-wrap: nowrap;                   this is the default, can be removed  */ 
   overflow-x: auto;
  /*justify-content: space-evenly;       removed  */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 75px;
  margin: 10px;
}

.item{
  margin-left: auto;                  /* added  */
}
.item:last-child{
  margin-right: auto;                 /* added  */
}

Too many
<div class="scroll">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<br>Too few
<div class="scroll">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

.Wrapper {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  max-width: 100%; //this will solve issue
}

.TagWrapper:{
  display: flex;
  flex-shrink: 0;
}