css - 顶部/底部填充溢出滚动一般屏幕

Question

我有一个包含 3(css 网格)列的设计。第二列有嵌套的网格内容需要垂直滚动，而其他两列保持各自的高度。我给第二个嵌套列一个溢出，但我还需要给它一个顶部和底部填充或边距。我的解决方案没有顶部/底部填充，但当我添加它时，它会强制滚动一般屏幕，从而滚动其他列。

这是 fiddle :https://jsfiddle.net/n2fole00/cger28v4/

这是使用滚动和填充的代码部分。

.section-column-grid-container {
  display: grid;
  align-content: start;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-gap: 35px;
  background-color: grey;
  height: 100vh;  
  padding: 35px;
  overflow-y: scroll;
}

.section-column-grid-container > div {
  background-color: pink;
  text-align: center;
  padding: 0;
  font-size: 18px;
  height:100px;
}

我该如何解决这个问题？谢谢。

Answer 1

我对您的代码做了一些更改，这是更新后的 fiddle :

Updated fiddle link

请检查并确认这是否是您要查找的内容:我所做的主要更改是:

.main-grid-container {
 overflow: hidden;
}