Div在使用css-grid时获取溢出滚动

Question

我正在使用css-grid，直到现在还没有遇到任何问题。我通常对css很在行，但不知道问题出在哪里。

<div class="the_grid">
  <div>Some content</div>
  <div>Some content</div>
  <div>Some content</div>
  <div>Some content</div>
  <div>Some content</div>
  <div>Some content</div>
  <div>Some content</div>
  <div>Some content</div>
  <div>Some content</div>
  <div>Some content</div>
</div>

...

.the_grid {
   display: grid;
   grid-template-rows: auto;
   grid-gap: 2%;
   grid-template-columns: 1fr 1fr;
}

如果我不滚动，网格的最后部分不会显示，我可以在底部添加一些填充，然后滚动被移除，但我认为这不是一个长期有效的解决方案，因为内容因人而异。div中的内容有不同的长度，但我以前没有遇到过同样的问题，现在已经在一些项目中使用了网格。我试着添加100%的高度，在周围的div上也是一样的，但没有什么不同。

编辑：

我得到了下面的答案，它是%，我把它改成了rem，然后我工作了。

Answer 1

与grid-gap: 2%;的问题恰好是百分比值。

根据spec的说法

百分比在确定内部大小贡献时解析为零，但在布局盒子的内容时解析为盒子的内容框。

这意味着百分比将等待内容布局，获取父级的宽度/高度，计算然后添加网格项之间的空间，这会导致溢出。

演示

​

body * {
  padding: 10px;
  border: 1px solid;
}

.the_grid {
  background: red;
  /* inline for side-by-side comparison */
  display: inline-grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
}

/* same for grid-columns-gap, for the sake of this demo i only used row */
.gap {
  grid-row-gap: 10%;
}

<div class="the_grid">
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
</div>

<div class="the_grid gap">
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
</div>

​

解决方案

不要使用百分比值。

​

body * {
  padding: 10px;
  border: 1px solid;
}

.the_grid {
  border: 1px solid;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2px;
}

<div class="the_grid">
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
  <div>Some</div>
</div>

​

你应该简单地避免在网格中使用百分比，因为它们是不可预测的，Good Read