CSS - Overflow-x: прокрутка обрезает начало div

Question

Возможно, это простое исправление, но я нигде не смог его найти. Возможно, я использовал неправильную терминологию, поэтому прошу прощения, если повторяю уже заданный вопрос.

Я создал эту демонстрацию stackblitz: https://stackblitz.com/edit/angular-ftv8ez

Я сталкиваюсь с этой проблемой, где у меня есть контейнер div с фиксированной шириной (300 пикселей).

В нем есть несколько блоков div, также с фиксированной шириной (300 пикселей).

Контейнер div имеет overflow-x: scroll, поэтому идея заключается в том, что вы можете прокручивать div, если он когда-либо переполнится.

Однако результат не работает должным образом. Начало контейнера div обрывается, в результате чего невозможно прокрутить первое поле в поле зрения.

Любые советы или помощь приветствуются!

Answer 1

Чтобы исправить это, вы можете изменить значение .container justify-content с justify-content:center на justify-content:start

Answer 2

Это ошибка в вашем коде. css В .Box вам нужно изменить высоту и ширину в .box или изменить ширину контейнера прокрутки, потому что вы установили размер 300px, измените его на 500 или меньше и Вы поместили 4 цвета по 100 пикселей, теперь я исправил код до 50 пикселей, и он работает.

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