How to prevent last column/row in grid layout from disappearing when overflow is present?

Question

The issue

The last column/padding in a grid disappears when overflow is present. We initially attempted to use padding on our grid. Looking into this question, we were able to confirm that it's not just us facing this challenge.

Unfortunately, the way our app is structured, we're unable to use the suggestions made by some of the answers to that question:

1. Right border: really more of a hack than a solution, does not work for us.
2. Pseudo-elements: same as above

What we have

We figured, why not try to place our grid inside another grid and "fake" the padding by making the container grid contain surrounding rows/columns to mimic padding?

It works well to ensure items are of correct width across multiple screen sizes:

• 3 columns, 2 rows on larger screens
• 2 columns, 3 rows on medium screens
• 1 column, 6 rows on smaller screens

It fails again, however, to maintain the last column/row in the grid even though it's specified in pixels. To see this effect, you will need to resize the screen (make it smaller) to show the overflow appear and the last column disappear.

html, body {
  margin: 0px !important;
}
.gallery {
  position: relative;
  display: grid;
  grid-template-columns: 22px [main] 1fr 22px;
  grid-template-rows: 22px [main] 1fr 22px;
  box-sizing: border-box;
  align-items: stretch;
  justify-items: stretch;
  height: 100vh;
  width: 100vw;
  overflow: auto;
}
.visuals {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
  grid-area: main;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
  height: 100%;
  gap: 22px;
}
.content {
  width: 100%;
  height: 100%;
  background-color: #444;
  color: white;
  white-space: nowrap;
}
@media only screen and (max-width: 858px) {
  .visuals {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

<div class="gallery">
  <div class="visuals">
    <div class="content">I have some content here that shouldn't be cut off.</div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

Our confusion

According to the documentation:

The new fr unit represents a fraction of the available space in the grid container.

So I would assume here that the explicitly defined 22px row/column would maintain its size and that 1fr would resize according to the remaining space. The last 22px row/column disappears altogether once the overflow appears.

The question

So, how can we ensure that the last column/row in a grid layout remains visible after the scrollbar appears?

Answer 1

Your problem is not that the outer grid isn't working ok.

The second column is dimensioned ok, but the content overflows it.

I have added overflow hidden in the snippet, and as afar as I can tell, it's working

html, body {
  margin: 0px !important;
}
.gallery {
  position: relative;
  display: grid;
  grid-template-columns: 22px [main] 1fr 22px;
  grid-template-rows: 22px [main] 1fr 22px;
  box-sizing: border-box;
  align-items: stretch;
  justify-items: stretch;
  height: 100vh;
  width: 300px;
  overflow: auto;
  box-shadow: inset 0px 0px 0px 22px red;
}
.visuals {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
  grid-area: main;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
  height: 100%;
  gap: 22px;
  opacity: 0.6;
}

.content {
  width: 100%;
  height: 100%;
  background-color: lightgreen;
  white-space: nowrap;
}
@media only screen and (max-width: 858px) {
  .visuals {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

<div class="gallery">
  <div class="visuals">
    <div class="content">this is a long sentence that won't wrap and overflow</div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>