CSS Grid with fixed size scrolling: How to solve issue where bottom margin/padding isn't shown?

Question

EDIT:

So I saw the duplicate link that was pointed to, and in my opinion, this question is to solve issues where you have given a fixed size (fixed width or fixed height).

The original question's solution is more about fixing the container using hacky methods. I decided to make a different approach of fixing it, while also fixing my own issue laid out in this question.

In CSS, when working with display: grid and fixed height, with overflow: auto turned on, you may get this kind of layout, shown below:

.scroll {
  overflow:  auto;
  background-color: #bbddee;
}

.container {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 10px;
  height: 420px;
}

.itemContainer {
  border: 1px solid #efefef;
  padding: 10px 20px;
  background-color: #fff;
}

.itemTitle {
  text-align:center;
  margin: 0 auto;
}

.itemLink {
  text-align: center; 
  margin: 0 auto;
}

<div id="retailerContent" class="tab-pane fade in active show">
  <div class="scroll">
    <div id="retailerOffersContainer" class="container">

      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      
    </div>
  </div>
</div>

When this happens, there is an issue where there are no paddings/margins down at the very bottom of the scroll list. How should the HTML and CSS be modified, so the bottom padding/margin would show up inside a scrollable CSS grid layout?

@Michael_B It seems like a possible duplicate, but my answer was mainly focused on stretching the boundaries of the container using the size of the elements. Maybe that's just one of many? — tom_mai78101, May 01 '18 at 15:15
@Michael_B I did provide an explanation, just below the code snippet. Would that be acceptable? — tom_mai78101, May 01 '18 at 15:19
related: https://stackoverflow.com/questions/38993170/last-margin-padding-collapsing-in-flexbox-grid-layout — Michael Benjamin, May 01 '18 at 15:21
A duplicate question is for the same initial issue and for different answer ... so you question is the same as the other if we consider the issue — Temani Afif, May 01 '18 at 15:21

score 0 · Accepted Answer · answered Dec 17 '18 at 21:34

0

This is my fix for when I was using CSS Grids:

/* Fix scrollbar removing padding-bottom */
@supports (-moz-appearance:none) {
  .container::after {
    content: "";
    height: 1px;
    margin: calc(var(--padding) - var(--gap));
  }
}

answered Dec 17 '18 at 21:34

Mi G

146
2
3

score -1 · Answer 2 · answered May 01 '18 at 14:54

Here's a solution (probably one of many) that shows how to fix the issue of missing bottom padding/margin in a fixed height div with display: grid:

.container {
 padding: 10px;
 display: grid;
 grid-row-gap: 10px;
 grid-template-columns: 1fr;
 width: 100%;
 }
 
 .itemContainer {
 border: 1px solid #efefef;
 background-color: #fff;
 max-height: 100%;
 padding: 10px 20px;
 height: 100%;
 }
 
 .itemTitle {
 text-align: center;
 margin: 0 auto;
 line-height: 20px;
 }
 
 .itemLink {
 text-align: center;
 margin: 0 auto;
 line-height: 20px;
 }

<div id="retailerContent" class="tab-pane fade in active show">
  <div style="height: 420px;background-color: #bbddee;">
    <div id="retailerOffersContainer" class="container">

      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      <div class="itemContainer">
        <div class="itemTitle">15% Off Room Essentials Cubes &amp; Bins</div>
        <div class="itemLink"><a>Get Offer&nbsp;&gt;</a></div>
      </div>
      
    </div>
  </div>
</div>

The main difference here is:

Grid container should not specify a height property. Allow the grid to conform to the height of the total contents and the grid gaps automatically.
Instead, make the elements inside the grid container have a max height, defined by the inner contents of said elements.

This will stretch the grid container, without the grid element contents spilling over and outside of the grid container.

If I'm wrong, please tell me what needs to be fixed, so that I can learn from your criticisms. Thanks. — tom_mai78101, May 01 '18 at 15:07
sorry but this has absolutely nothing to do with CSS-grid, it's a simply overflow issue with padding that we can easily adjust. There is a ton of question dealing with this — Temani Afif, May 01 '18 at 15:08
@TemaniAfif I see. If it's an overflow issue with padding, what's the proper way to adjust it, so the original issue is fixed? Thanks. — tom_mai78101, May 01 '18 at 15:09
@TemaniAfif Ah, that's something I didn't know before. Thanks for sharing. — tom_mai78101, May 01 '18 at 15:11
@TemaniAfif CSS-Grid does play a part because my fix has to do extra work for CSS Grid/Flux gaps. Otherwise your new padding is the size of your gaps. Easy to miss if your gaps and padding are the same. — Mi G, Dec 17 '18 at 21:41

CSS Grid with fixed size scrolling: How to solve issue where bottom margin/padding isn't shown?

2 Answers2