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%;.

Согласно spe c

процентное соотношение разрешается против нуля для определения внутреннего c размер вкладов, но разрешается по отношению к блоку содержимого коробки при размещении содержимого блока.

Это означает, что проценты будут ждать, пока содержимое не будет выложено, получить ширину / высоту родительского элемента, вычислить затем добавьте пробел между элементами сетки, что приведет к переполнению.

Demo

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