Как сделать скролл по горизонтали с двумя рядами внутри?

Question

[Old_Chicken]

У меня есть контейнер, внутри которого должны быть два ряда блоков, расположенных горизонтально, а не вертикально. Мне нужно сделать так, чтобы эти два ряда остались горизонтальными, и я мог прокручивать их по горизонтали. Я добавил скролл по горизонтали, но блоки все равно уходят друг под друга(в плане не идут дальше в ряд а уходят в колонку). Мне нужно сделать так, чтобы контейнер list__block не выходил за рамки контейнера wrapper, и мог прокручиваться по горизонтали.

<div class="wrapper">
      <ul class="list__block">
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
      </ul>
   </div>

.wrapper {
   width: 1200px;
   height: 608px;
   background-color: blue;
   margin: auto;
   display: flex;
   align-items: center;
}
.list__block {
   margin-left: auto;
   border: 1px solid red;
   width: 1000px;
   height: 580px;
   display: flex;
   flex-wrap: wrap;
   overflow-x: scroll;
   overflow-y: hidden;
   gap: 20px;
}
.item__block {
   width: 450px;
   height: 247px;
   background: red;
}

Comments

[Александр Васильев]

А второй ряд - это что из приведенного?

[Old_Chicken]

Александр Васильев, условно хотелось бы , чтобы было два ряда по горизонтали , в первом ряду было 4 блока , а во втором три , и чтобы я мог скролить данный контейнер , а у меня сейчас блоки по вертикали ушли в низ в два ряда

[Александр Васильев]

Old_Chicken,

spoiler

[Old_Chicken]

Все , вопрос решен , .list__block задал transform: rotate(90deg) и поменял значение местами overflow-x: hidden;
overflow-y: scroll;

[Александр Васильев]

Old_Chicken, решил - хорошо, а контента внутри item__block не будет?

[Old_Chicken]

будет , я его тоже переверну

[Old_Chicken]

Александр Васильев, тоже хороший вариант , спасибо

Answer 1

[Sergey]

Используете свойство overflow: scroll, есть два варианта прокрутки - горизонтальная и вертикальная. Вот как вы можете настроить каждый из них:

Горизонтальная прокрутка
Если вам нужно добавить горизонтальную прокрутку к вашему контейнеру, вы можете использовать следующее:

.scroll-container {
  width: 300px; /* Ширина вашего контейнера */
  height: 200px; /* Высота вашего контейнера */
  overflow-x: scroll; /* Добавление горизонтальной прокрутки */
}

Вертикальная прокрутка
Если вы хотите добавить вертикальную прокрутку к вашему контейнеру, используйте следующий код:

.scroll-container {
  width: 300px; /* Ширина вашего контейнера */
  height: 200px; /* Высота вашего контейнера */
  overflow-y: scroll; /* Добавление вертикальной прокрутки */
}