6

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!

2 Answers 2

16

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

2
  • 4
    that was my problem too but what if we do want it to be centered when the content fits (when no scroll is needed) ? Nov 9, 2020 at 16:29
  • This fixed the issue for me. That's an hour of my life I'll never get back. Thank you for ending my suffering!
    – person13
    Nov 9, 2022 at 4:06
0

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;
}

1
  • That was the whole point though :D To have 4 boxes wider than the container, so I can get the scrollbar to display
    – Jesper
    Mar 31, 2020 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.