Sometimes, when you are writing a component, you suddenly notice a strange horizontal scroll bar. Time and time again, you try to correct the situation, only to later realize that the reason is something else. How many times has this happened? In this article, I will explain a tricky problem that can cost hours of trial and error; this problem is related to the CSS grid layout, and I thought it was worth writing about. Before I start, I want to give some context. Here are a few things that should be taken into account. Imagine that you are:

• We encountered this problem in the middle of the working day. You’re tired, and you have a lot of work that needs to be done.
• You’re already hungry.
• The root cause of the problem is easy to miss, since it is not related to the component you are working on.

With all this in mind, let’s dive into the problem.

---

What should happen

I’ll give you some context. Here is the layout that you should get. Note that there is a scrollable container at the end of the main section.

Let’s define the problem

While working on the scrollable container section, I noticed horizontal scrolling across the entire page, which I didn’t expect to see.

The section had a display: flex property with no wrapper, so the content could stay on the same line. In addition, to allow scrolling on the x-axis, I used overflow-x: auto.

    .section {
        display: flex;
        overflow-x: auto;
      }

However, there was no effect. This was confusing: I was sure this was how I was making a scrollable container. I opened the DevTools browser to check the main section and noticed that the section is very wide. It expanded due to the scrollable container.

Strange, isn’t it? When I first saw this problem, I asked the following questions::

• Maybe I forgot to add overflow-x: hidden?
• Is something wrong with flexbox?

I double-checked flexbox and overflow-x. Everything should have worked as I expected. Then I suspected that the CSS grid for the parent element might be the cause of the problem. I checked the suspicion, and it was confirmed. The layout broke due to grid.

The root cause of the problem could be a CSS feature (i.e., due to some context, this behavior is expected) or that the property was incorrectly implemented in the browser.

Why did scrolling appear?

You may have wondered why grid attaches scrolling to the container. See: here is the grid where the main and aside sections are located.

    <div class="wrapper">
        <main>
          <section class="section"></section>
        </main>
        <aside></aside>
      </div>

@media (min-width: 1020px) {
    .wrapper {
      display: grid;
      grid-template-columns: 1fr 248px;
      grid-gap: 40px;
    }
  }

The main properties have a value of 1fr. This means that main will take up the available space, except for aside and padding. There is no doubt about it. However, the minimum size of the grid element content is auto. This means that the grid element can expand due to long content (in our case, because of a scrolling container).

How do I remove unnecessary scrolling?

The problem is solved like this: you need to tell the browser that we need a specific and fixed minimum size, but not auto. You can do this using the minmax () function.

.wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px;
    grid-gap: 40px;
  }

We have solved the problem. But we can also solve this problem at the grid element level. Here are two solutions that apply to the .main element::

1. To set the property min-width: 0.
2. Or the overflow: hidden.

Depending on the context, you can use one of the two solutions above. However, these solutions may have some side effects, one of them is related to overflow-hidden. Imagine that a child element of the main section has a decorative pseudo-element that is placed outside the main bounds. In this case, if you apply overflow-hidden, the property will crop this pseudo-element.

In the picture above, we have two elements that are located outside of main (the sharing button on the left and the decorative figure on the bottom right). With this in mind, you should choose the solution that best suits your case.