Problem when using with overflow-x: scroll and justify-content: center [duplicate]

Question

I am having issue while using overflow-x: scroll and justify-content: center on flex parent container. Please see my code below.

issue: first flex child item is not showing it is crop in left or other all child item. please see my screenshot and code below.

I need your help. thank you in advance.

.container {
  width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  overflow-x: scroll;
}

.box {
  height: 100px;
  border: 1px solid red;
  min-width: 100px;
  margin-right: 10px;
  flex-grow: 1;
}

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

Answer 1

The justify-content: center is making the content to align to center, and some of the left is cut off. You could remove it and try.

.container {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  overflow-x:scroll
}
.container::before,
.container::after {
  content: '';
  width: 100%;
}
 
.box {
  height: 100px;
  border: 1px solid red;
  min-width: 100px;
  margin-right: 10px;
  flex-grow: 1;
}

<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>