Как сделать переполнение флексбокса и возможность прокрутки?
У меня есть следующий пример (я упростил его, добавив только необходимый код).
.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;
}<div class = "wrapper">
<div class = "container">
<div class = "leftColumn">
<p>
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.
</p>
</div>
<div class = "rightColumn">
<div class = "products">
<div class = "product">
<p>Product 1</p>
</div>
<div class = "product">
<p>Product 2</p>
</div>
<div class = "product">
<p>Product 3</p>
</div>
<div class = "product">
<p>Product 4</p>
</div>
<div class = "product">
<p>Product 5</p>
</div>
<div class = "product">
<p>Product 6</p>
</div>
<div class = "product">
<p>Product 7</p>
</div>
<div class = "product">
<p>Product 8</p>
</div>
</div>
</div>
</div>
</div>Как видите, есть два столбца: один с текстом, другой со списком продуктов. Оба они находятся внутри контейнера, который не соответствует 100% ширины области просмотра. Товары находятся в одном ряду и в какой-то момент они переполняются и вынуждены переполняться до предела области просмотра. Вы можете увидеть это поведение в примере, который я приложил выше.
Проблема этого сценария заключается в том, что большинство продуктов скрыты, и я пытаюсь сделать этот список продуктов прокручиваемым, чтобы все продукты можно было видеть, просто перемещая прокрутку слева направо или наоборот. Поскольку контейнер не соответствует 100% ширины области просмотра, если я установлю элемент overflow: auto на products, прокрутка будет видна, но список не переполнится до тех пор, пока не будет достигнут предел области просмотра.
Итак, на данный момент, как я могу добиться, чтобы список продуктов переполнялся до предела области просмотра и в то же время его можно было прокручивать? Я хотел бы решить эту проблему только с помощью CSS, но если необходимо добавить немного JavaScript, я был бы готов добавить его.
@SyndRain Я постарался максимально упростить пример. В исходном контейнере больше контейнеров, элементы которых помещаются внутри контейнера. Это просто дизайн.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Одна из идей — добавить оболочку для левого и правого столбцов, ширина которой равна .container плюс правое поле. Это можно легко сделать, сделав его absolute и относительно .wrapper. Однако, поскольку вы упомянули, что под .container есть еще элементы, эта опция недоступна, не затрагивая эти элементы.
При этом без absolute расчет по-прежнему возможен на основе пользовательского свойства, учитывающего ваш min-width:85%, но будет немного сложнее.
*Обратите внимание, что это решение расширяет товары только до конца wrapper, поэтому, если в реальном случае wrapper не охватывает всю область просмотра, вам нужно будет изменить расчет, чтобы он основывался на vw - additional width, а не на ширине оболочки. Это опасно, поскольку могут возникнуть неожиданные поля (например, body по умолчанию), вызывающие появление неожиданной полосы прокрутки. В этом случае использование JS будет лучшим решением.
.wrapper {
/* overflow: auto; */
}
.container {
--widthRatioToWrapper: 0.85; /*free to modify*/
max-width: calc(100% * var(--widthRatioToWrapper));
margin-left: auto;
margin-right: auto;
}
.column-wrapper {
--marginRatio: calc(calc(1 - var(--widthRatioToWrapper)) / 2); /*7.5%*/
--widthRatioToContainer: calc(calc(1 - var(--marginRatio)) / var(--widthRatioToWrapper));
width: calc(100% * var(--widthRatioToContainer));
display: flex;
align-items: start;
}
.leftColumn,
.rightColumn {
/*float: left;*/
}
.leftColumn {
flex: 0 0 max-content;
max-width: calc(20% / var(--widthRatioToContainer)); /*Can't use 20% here as its parent isn't .container anymore*/
}
.rightColumn {
/*max-width: 80%;*/
overflow: auto;
}
.products {
display: flex;
gap: 20px;
}
.product {
background: #ddd;
height: 50px;
width: 300px;
min-width: 300px;
}<div class = "wrapper">
<div class = "container">
<div class = "column-wrapper">
<div class = "leftColumn">
<p>
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.
</p>
</div>
<div class = "rightColumn">
<div class = "products">
<div class = "product">
<p>Product 1</p>
</div>
<div class = "product">
<p>Product 2</p>
</div>
<div class = "product">
<p>Product 3</p>
</div>
<div class = "product">
<p>Product 4</p>
</div>
<div class = "product">
<p>Product 5</p>
</div>
<div class = "product">
<p>Product 6</p>
</div>
<div class = "product">
<p>Product 7</p>
</div>
<div class = "product">
<p>Product 8</p>
</div>
</div>
</div>
</div>
</div>
</div>Спасибо! Когда я говорил On the original one, there are more containers which have elements that fits inside the container, я имел в виду, что у меня было больше контейнеров (тот же класс), поэтому я не мог изменить поведение контейнера глобально. Наконец, согласно первой части вашего ответа, я выделил .container, в котором мне нужно это «странное» поведение, и сделал несколько трюков, чтобы настроить его так, чтобы он чувствовал себя равным остальным контейнерам.
Есть ли причина не удалять
margin-rightиз контейнера, если вам все равно не нужны поля с правой стороны? Именно по этой причине список не идет до конца вправо.