Как сделать переполнение флексбокса и возможность прокрутки? ⇐ CSS

[Anonymous]

У меня есть следующий пример (я упростил его, добавив только необходимый код).

Код: Выделить всё

.wrapper{
overflow: auto;
}

.container{
max-width: 85%;
margin-left: auto;
margin-right: auto;
}

.leftColumn, .rightColum{
float: left;
}

.leftColumn{
max-width: 20%;
}

.rightColumn{
max-width: 80%;
}

.products{
display: flex;
gap: 20px;
}

.product{
background: #ddd;
height: 50px;
width: 300px;
min-width: 300px;
}

Код: Выделить всё

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Product 1

Product 2

Product 3

Product 4

Product 5

Product 6

Product 7

Product 8

Как видите, есть два столбца: один с текстом и другой со списком продуктов. Оба они находятся внутри контейнера, который не соответствует 100% ширины области просмотра. Товары находятся в одном ряду и в какой-то момент они переполняются и вынуждены переполняться до предела области просмотра. Вы можете увидеть это поведение в примере, который я приложил выше.
Проблема этого сценария заключается в том, что большинство продуктов скрыты, и я пытаюсь составить этот список. продуктов с возможностью прокрутки, чтобы все продукты можно было увидеть, просто перемещая прокрутку слева направо или наоборот. Поскольку контейнер не соответствует 100% ширины области просмотра, если я установлю элемент overflow: auto для продуктов, прокрутка будет видна, но список не переполнится до тех пор, пока не будет достигнут предел области просмотра.
Итак, как мне добиться, чтобы список продуктов переполнялся до предела области просмотра и в то же время его можно было прокручивать? Я хотел бы решить эту проблему только с помощью CSS, но если необходимо добавить немного JavaScript, я буду готов добавить его.

Подробнее здесь: https://stackoverflow.com/questions/787 ... scrollable