How can I ensure padding works on a grid item with limited height?

user_123671 0
Viewed 386

I have a simple grid layout, that has a limited height and scrolls.

.outer {
  border: 1px solid red;
  display: grid;
  grid-auto-flow: row;
  padding: 30px;
  grid-gap: 30px;
  max-height: 150px;
  overflow-y: scroll;
}

.inner {
  background-color: gray;
  height: 100px;
  width: 100px;
}
<div class="outer">
  <div class="inner">
    one
  </div>
  <div class="inner">
    two
  </div>
</div>

The padding is being applied at the top, left and right of the grid:

enter image description here

But when I scroll down, the padding on the bottom isn't applied:

enter image description here

If I remove the max-height the padding at the bottom is now applied:

enter image description here

Why isn't the bottom padding being used? How can I ensure padding works on a grid item with limited height?

css-grid css
2 Answers

Clarity around overflow and padding is a current issue in the CSS spec and the behavior may differ based on each case.

Until the spec is clarified or browsers change their behavior, a workaround for your use case is to add an empty element at the end (since your padding is equal to the gap).

.outer {
  border: 1px solid red;
  display: grid;
  grid-auto-flow: row;
  padding: 30px;
  grid-gap: 30px;
  max-height: 150px;
  overflow-y: scroll;
}

.inner {
  background-color: gray;
  height: 100px;
  width: 100px;
}

.outer::after {
  content:"";
  height:0.1px;
}
<div class="outer">
  <div class="inner">
    one
  </div>
  <div class="inner">
    two
  </div>
</div>

user_86203330

You need to wrap the inner content with a div/container and give the container the grid display, in that case the padding will be applied on that div.

.outer {
  border: 1px solid red;
  max-height: 150px;
  overflow-y: scroll;
}

.outer-content {
  display: grid;
  grid-auto-flow: row;
  padding: 30px;
  grid-gap: 30px;
}

.inner {
  background-color: gray;
  height: 100px;
  width: 100px;
}

HTML

<div class="outer">
    <div class="outer-content">
       <div class="inner">one</div>
       <div class="inner">Two</div>
    </div>
</div>
user_30038100
Related