Grid контейнер не адаптируется по высоте

Question

Нужно реализовать блок, в котором будет неопределенное количество елементов. Важно, чтобы эти элементы были в 2 ряда, занимали всю высоту родителя и адаптировались по высоте.

.grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  overflow-x: auto;
  gap: 24px;
  background-color: rgb(68, 47, 255);
}

.grid-elem {
  background-color: rgb(0, 255, 166);
  width:100px;
  height: 100px;
}

<div class="grid">
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
    </div>

Answer 1

Можно сделать вот так:

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  overflow-x: auto;
  gap: 24px;
  background-color: rgb(68, 47, 255);
  height: 100%;
}

.grid-elem {
  background-color: rgb(0, 255, 166);
  width: 100px;
  height: 100%;
}

<div class="grid">
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
  <div class="grid-elem"></div>
</div>

Answer 2

/* 0! для начала перестанем насиловать сетку убрав габариты из .grid-elem */
.grid-elem {background-color: rgb(0, 255, 166);}

.grid {
  display: grid;
  grid-auto-columns: 100px; /* 1! */
  grid-template-rows: 1fr 1fr; /* 2! */
  grid-auto-flow: column;
  overflow-x: auto;
  grid-gap: 24px; /* 3! */
  padding: 24px;
  background-color: rgb(68, 47, 255);
  height: 70vh; width: 70vw; /* 4! */
}

<div class="grid">
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
      <div class="grid-elem"></div>
    </div>

БЛОГ НА HUSL

Grid контейнер не адаптируется по высоте

Ответы (2 шт):