1

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.

2
  • Is there any reason not to remove the 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.
    – SyndRain
    Commented Jul 9 at 19:22
  • 1
    @SyndRain I tried to simplify the example as much as I could. On the original one, there are more containers which have elements that fits inside the container. Its just a thing of design. Commented Jul 9 at 19:31

1 Answer 1

5

One idea is to add a wrapper for the left and right columns, of which width is same as .container plus the right margin. This could be done easily by making it absolute and relative to .wrapper. However, since you mentioned there are more elements under .container, this option is not available without affecting those elements.

That being said, without absolute the calculation is still doable base on a custom property respecting your min-width:85%, but will be a bit more complicated.

*Note that this solution only extends the products to the end of wrapper, so if in the real case wrapper doesn't span over the whole viewport, you'll need to change the calculation to be based on vw - additional width instead of wrapper's width. This is dangurous since there could be unexpected margins (such as body by default) causing unexpected scrollbar to appear. In that case using JS will be a better solution.

.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>

1
  • Thank you! What I meant when I said On the original one, there are more containers which have elements that fits inside the container is that I had more containers (same class) so I could not modify the behaviour of the container globally. Finally, according to your first part of your answer, I have isolated the .container in which I want this "strange" behaviour and make some tricks to adjust it to feel equals to the rest of the containers. Commented Jul 14 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.