Как получить список прокрутки в ячейке сетки css

Question

Я пытаюсь использовать сетки css для своего макета, но у меня возникают проблемы с прокруткой содержимого в ячейке сетки:

В приведенном ниже коде моя цель - иметь родительский контейнер 100 % visible, есть контейнеры для child1 и child2, которые занимают примерно половину пространства каждый (сетка), и списки внутри child1 и child2 для прокрутки.

Я МОГУ вычислить высоту для .parent, так как это 100% родительского смещения, но вычисляя высоту div-ов списка-контейнера, назначенную сеткой? Без высоты списки-контейнеры не будут прокручиваться.

У меня блиц на стеке https://stackblitz.com/edit/js-hytrwz

<style>
    .main {
        position: relative;
        top: 0;
        left: 0;
        height: 20em;
        margin: 4px;
        padding: 4px;
        border: 1px red solid;
        overflow: hidden;
    }

    .parent {
        height: 100%;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-gap: 6px;
        border: 1px blue solid;
        padding: 2px;
    }

    .child {
        overflow: auto;
        border: 1px green solid;
    }

    .w100 {
        height: 100%;
    }
</style>
<div id="app">
    <main id="calculated-height" class="main">
        <div id="src-cite" class="w100">
            <div id="grid-defined2" class="parent w100">
                <div id="list1" class="list-container w100">
                    <div class="child child1">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>10</div>
                    </div>
                </div>
                <div id="list2" class="list-container">
                    <div class="child child2">
                        <div>B1</div>
                        <div>B2</div>
                        <div>B3</div>
                        <div>B4</div>
                        <div>B5</div>
                        <div>B6</div>
                        <div>B7</div>
                        <div>B8</div>
                        <div>B9</div>
                        <div>B10</div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

Я потратил пару дней на размышления и играть с этим. Мне больше не повезло, пытаясь решить проблему с flexbox.

Любая помощь приветствуется.

То, что выглядит как ненужные контейнерные div, предназначено для имитации некоторых оболочек компонентов, над которыми я не могу контролировать .

Answer 1

Если я вас правильно понял, это вы ищете? Не менять HTML, только CSS.

ОБНОВЛЕНИЕ 3

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  /* better to use min-height to body. here only to demonstrate */
  position: relative;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0;
}

#app {
  height: 100%;
}

.main {
  position: relative;
  top: 0;
  left: 0;
  height: 20em;
  padding: 4px;
  border: 1px red solid;
  overflow: hidden;
  height: 100%;
}

#src-cite {
  height: 100%;
}

.parent {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 6px;
  border: 1px blue solid;
  padding: 2px;
}

.list-container {
  height: 100%;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  border: 1px green solid;
}

.w100 {}

<div id="app">
  <main id="calculated-height" class="main">
    <div id="src-cite" class="w100">
      <div id="grid-defined2" class="parent w100">
        <div id="list1" class="list-container w100">
          <div class="child child1">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
          </div>
        </div>
        <div id="list2" class="list-container">
          <div class="child child2">
            <div>B1</div>
            <div>B2</div>
            <div>B3</div>
            <div>B4</div>
            <div>B5</div>
            <div>B6</div>
            <div>B7</div>
            <div>B8</div>
            <div>B9</div>
            <div>B10</div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>