Скролл по горизонтали с двумя рядами внутри
У меня есть контейнер, внутри которого должны быть два ряда блоков, расположенных горизонтально, а не вертикально. Мне нужно сделать так, чтобы эти два ряда остались горизонтальными, и я мог прокручивать их по горизонтали. Я добавил скролл по горизонтали, но блоки все равно уходят друг под друга(в плане не идут дальше в ряд а уходят в колонку). Мне нужно сделать так, чтобы контейнер list__block не выходил за рамки контейнера wrapper, и мог прокручиваться по горизонтали.
.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;
}<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>