如何在 CSS 网格单元格中获取滚动列表

Question

我正在尝试为我的布局使用 css 网格，但我无法让内容在网格单元格内滚动：

在下面的代码中，我的目标是让父容器 100% 可见，让 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>