I have the following example (I have simplified it with just the necessary code).
.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>
As you can see, there are two columns, one with some text and the other one with a list of products. Both of them are inside a container that does not fits the 100% of the width of the viewport. The products are in the same row and in some point they overflows and have to overflow until the limit of the viewport. You can see this behaviour in the example that I have attached above.
The problem with this scenario is that most of the products are hidden and what I am trying to do is to make that list of products scrollable so all the products could be visible just moving the scroll from left to right or vice versa. As container does not fit the 100% of the width of the viewport, if I set overflow: auto
to products
element, the scroll is visible but the list does not overflows until the limit of the viewport.
So, at this point, how could I achieve that product list overflows until the limit of the viewport and at the same time it will be scrollable? I would like to resolve it only with CSS but if it is necessary to add some JavaScript I would be open to add it.
margin-right
of the container if you don't want any margin at the right side anyway? That is the reason why the list doesn't go all the way to the right.