How to get scrolling in a CSS grid?

Question

I have a component embedded in a css-grid.

In stack blitz I have an external grid of 3 rows. The one of the rows has a min-width. How do I get it to scroll horizontally if the viewport is smaller than the min-width?

Within the middle row I have a component that itself uses a 2 column grid. The divs in the columns have a min-height.

What I am looking for is if the viewport is sized so that the entire inner component (red boxes) is not visible, the red box is scrollable.

here is a stack blitz:

https://stackblitz.com/edit/angular-q4geyk

Here is another example:

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.content {
  display: grid;
  grid-template-rows: 2em 1fr 1px;
  grid-gap: 0.5rem;
  height: 20em;
}

.my-panel {
  border: 1 green solid;
  background-color: red;
  padding: 0.25rem;
}

.my-component {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
  padding: 0.25rem;
  height: 100%;
}

header {
  border: green solid 1px;
  padding: 4px;
}

main {
  border: blue solid 1px;
  padding: 1rem;
}

main div {
  border: red solid 1px;
  height: 100%;
}

footer {
  border-bottom: black solid 1px;
}

<div class="content">
  <header>
    <div>Component Showcase</div>
  </header>

  <main>
    <div>
      <section class="my-component">
        <div class="my-panel">&nbsp;</div>
        <div class="my-panel">&nbsp;</div>
      </section>
    </div>
  </main>

  <footer></footer>
</div>

Solution 1

You're encountering two main problems with the layout:

First, by default, a grid item cannot be smaller than its content. The defaults are min-width: auto and min-height: auto. Therefore, the main element, which is a grid item in app-root, needs an override.

Add min-width: 0 to main.

More complete explanation here: Prevent content from expanding grid items

---

Second, you have both columns with the red boxes set to:

grid-template-columns: 1fr 1fr

This means that each column will share an equal distribution of the free space in the container. Without any content in those columns, both columns can simply shrink to 0 width, never triggering an overflow. Hence, no scrollbar.

The same problem would exist if you did this:

grid-template-columns: 50% 50%

So, unless there will always be content in those columns to force a minimum width, I would recommend something like this:

grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr)

https://stackblitz.com/edit/angular-ortstl?file=src/styles.css

Solution 2

.the_div_you_want_to_scroll{
display: grid ;
align-items: center ;
grid-auto-flow: row ;
grid-auto-rows: 25% ; // play with this to change height of the children, 50% will fill half
grid-template-columns: unset; // do not set template columns and rows
grid-template-rows: unset;
overflow: scroll;

}

This way you can add as many children as you need, In grid system, always hard to maintain dynamic content when using template,

when you can't predict how many items are you going to get, use grid-auto-flow

✌