CSS - Overflow-x: scroll cuts off beginning of div

user_4132538 0
Viewed 2002

This is probably a simple fix, but I couldn't find it anywhere - Maybe I've been using the wrong terminology, so I do apologize if I'm repeating a question that's already been asked.

I have created this stackblitz demo: https://stackblitz.com/edit/angular-ftv8ez

I'm running into this issue, where I have a container div with a fixed width (300px).

Within it, I have some box divs, also with a fixed width (300px).

The container div, has overflow-x: scroll, so the idea is that you can scroll the div if it ever overflows.

However, the result is not performing as expected. The beginning of the container div is cut short, which results in it not being possible to scroll the first box into view.

Any tips or help is very welcome!

less sass css html
2 Answers

To fix it, you can change the .container justify-content value from justify-content:center to justify-content:start

user_131611500

Their is a mistake in your code of .css In the .Box you need to change height and width in .box or need to change width of scroll container because you Set size of 300px change it to 500 or less and you placed 4 colours of 100px now i corrected the code to 50px and it works.

p {
  font-family: Lato;
}
.container {
  display: flex;
  justify-content: start;
  width: 300px;
  overflow-x: scroll;
}
.red {
  background-color: red;
  margin-right: 10px;
  flex-shrink: 0;
}
.yellow {
  background-color: yellow;
  margin-right: 10px;
  flex-shrink: 0;
}
.blue {
  background-color: blue;
  margin-right: 10px;
  flex-shrink: 0;
}
.green {
  background-color: green;
  flex-shrink: 0;
}

.box {
  width: 50px;
  height: 50px;
}

user_126350350
Related