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.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top