嵌套CSS Grid中overflow scroll失效求助（已参考方案但无法适配）

我了解到已有相关帖子及解决方案，但无法将其应用到自己的布局中，许久未能解决问题。

我的问题如下：在一个CSS Grid内部嵌套了另一个CSS Grid，其中一个内部元素内容溢出，需要让该特定元素可滚动，同时父级CSS Grid及其他元素保持尺寸固定。

• 我的简化代码
• 参考解决方案（来自上述相关帖子）

代码片段 #

CSS 代码

* {
  margin: 0;
  padding: 0;
}

#root {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3fr;
  height: 100vh;
}

nav {
  grid-row: 1;
}

main {
  grid-row: 2;
}

div {
  overflow: auto;
}

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#a {
  grid-column: 1;
  grid-row: 1;
  overflow: auto;
  background-color: lightgreen;
}

#b {
  grid-column: 2;
  grid-row: 1;
  background-color: lightcyan;
}

#c {
  grid-column: 1;
  grid-row: 2;
  background-color: lightpink;
}

#d {
  grid-column: 2;
  grid-row: 2;
  background-color: lightyellow;
}

HTML 代码

<div id="root">
  <nav>
  Navbar
  </nav>

  <main>
    <div id="container">
      <div id="a">A</div>
      <div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis massa egestas, placerat ante et, ultricies eros. Duis vel feugiat dolor. Integer et auctor turpis. Proin lobortis dolor at justo condimentum lobortis. Curabitur viverra mauris leo, sed condimentum orci blandit at. Quisque tincidunt placerat ipsum ut rhoncus. Suspendisse molestie nulla vel justo imperdiet pellentesque. Donec dapibus massa felis, vitae ultricies lectus fermentum non. Nullam commodo consequat ligula, ac mollis tellus malesuada a. Nullam consequat ut libero ac elementum. Ut viverra ac sapien sit amet viverra. Sed at augue vel nisi finibus efficitur. Donec interdum magna at lorem congue, et gravida eros pulvinar. Nulla pretium, felis nec consectetur maximus, sem lectus ullamcorper lacus, volutpat vestibulum ligula velit sed magna.

  Quisque felis nibh, tempus quis porttitor id, blandit auctor felis. Curabitur in imperdiet ex. Ut sit amet massa id justo viverra sodales eu id ligula. Fusce porta iaculis sem, at lobortis purus hendrerit sed. Ut at viverra nisl. Mauris non enim nibh. Vestibulum eleifend quam ac nunc convallis, eget viverra urna hendrerit. Cras tincidunt tristique lorem, eu tristique tortor tincidunt eget. Suspendisse convallis ut libero in tempor. Cras non placerat ligula. Integer accumsan volutpat pellentesque. Mauris nec urna vitae urna scelerisque ultrices sed sed turpis. Quisque ullamcorper nulla nec dignissim vehicula. Cras elit sem, tempus quis mi id, euismod ornare metus.

  Nam erat elit, aliquam nec est sit amet, suscipit porttitor diam. Sed consequat laoreet magna vel efficitur. Proin aliquet eget arcu eget semper. Etiam convallis mi in gravida congue. Aenean elit quam, consequat non libero sed, tincidunt mattis nunc. Integer lectus risus, aliquet ut nunc posuere, vehicula varius mi. Quisque ultrices justo nec ipsum volutpat, eu congue metus vehicula. Quisque vel eleifend eros, pulvinar tempus neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam, ante eu blandit consequat, ante ex volutpat nibh, et consectetur leo odio non orci. Phasellus fringilla ex metus, quis varius nibh pretium in.

  Pellentesque sapien lectus, varius a congue in, lobortis condimentum augue. Duis a maximus augue, a dictum ligula. Nullam pulvinar tortor ut dui condimentum, ac venenatis arcu consectetur. Integer gravida erat nibh. Duis molestie suscipit porttitor. In ac odio pulvinar, viverra quam a, dignissim nisi. Integer commodo tempus mauris at finibus. Fusce pretium luctus metus. Nam varius facilisis feugiat. Nam ut suscipit tellus. Praesent vel faucibus lacus, hendrerit pulvinar lectus. Donec velit odio, suscipit ac dui vitae, sagittis dictum purus.

  Sed dictum, nulla non imperdiet facilisis, quam augue scelerisque augue, id maximus velit odio vel velit. Praesent ullamcorper ullamcorper tortor, eget posuere orci euismod nec. Duis at est venenatis, ultrices augue consequat, tristique nisl. Mauris in velit mattis, tincidunt ipsum in, dignissim metus. Integer in risus rhoncus, varius lorem et, convallis nisl. Nullam faucibus vulputate egestas. Quisque et venenatis eros. Curabitur gravida urna quis tortor mattis, id blandit odio imperdiet. Nunc eu massa felis. Cras venenatis consequat elit in lacinia. Fusce ornare faucibus augue sollicitudin posuere. Nullam eu tortor nec neque convallis varius.</div>
      <div id="c">C</div>
      <div id="d">D</div>
    </div>
  </main>
</div>

我无法看出自己的代码与参考方案的区别，故发布此帖。

相关帖子的核心要点：

overflow: scroll仅在固定尺寸下生效。

感谢帮助！

内容的提问来源于stack exchange，提问作者Zokalyx