如何确保填充在有限高度的网格项目上有效? [英] How can I ensure padding works on a grid item with limited height?

问题描述

我有一个简单的网格布局，高度和滚动次数有限.

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:

但是当我向下滚动时，底部的填充未应用:

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

如果我删除了 max-height ，则现在将应用底部的填充:

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

为什么不使用底部填充?如何确保填充在有限高度的网格项目上有效?

推荐答案

关于溢出和填充的说明是

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>

这篇关于如何确保填充在有限高度的网格项目上有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！