Как горизонтально прокрутить квадратные поля, присутствующие в строке в html / css?

Question

У меня есть скрипка , которая очень хорошо выглядит на рабочем столе, как показано ниже:

Фрагменты CSSкоды, которые я использовал для горизонтального выравнивания квадратных квадратов в строке:

.squares {
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 1rem;
  position: relative;
  width: 70%;
  max-width: 1080px;
  margin: auto;
  flex-wrap: wrap;
}

Постановка задачи:

Яинтересно, какие CSS-коды я должен добавить в скрипку, чтобы иметь возможность горизонтальной прокрутки квадратных квадратов в мобильном представлении, подобном следующему:

Answer 1

Вы можете добавить overflow-y: auto к .squares div и удалить flex-wrap: wrap.

Посмотрите на это скрипка

Вы также должны предоставитьmin-width: 150px до .squares .square

Answer 2

Просто просмотр Горизонтальная прокрутка изображений.Эта функциональность присутствует на многих веб-сайтах в соответствии с аффилированной ссылкой

Ссылка