CSS show scrollbar only when max-width reached

Update your CSS as below:

.container {
  display: flex;
}
.full-width {
  width: 100%;
  flex: 40%;
}
.box-container {
  width: fit-content;
  max-width: 60%;
  display: flex;
  overflow-x: auto;
}
.box {
  height: 100px;
  width: 100px;
  min-width: 100px;
  background-color: red;
  margin-right: 15px;
}

I have used overflow-x: auto; which helps to generate a horizontal scroll bar. Hope this works fine.