如何裁剪Grid单元格并为其添加滚动功能？

有一篇关于将1fr限制为0的优质文章：Why does minmax(0, 1fr) work for long elements while 1fr doesn't?

我希望实现一个可随内容增长但不超出父容器范围的单元格。

目前我的Grid中有一个单元格内容过长，未展开就已超出屏幕，因此需要实现两个效果：一是裁剪单元格尺寸，二是添加滚动功能。

我使用了上述文章中的minmax(0, 1fr)，让Grid可以将单元格压缩至0，但它仍无法有效计算高度，导致滚动条因缺少固定高度信息而无法激活。

示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>

    body
    {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .page
    {
        height: 100%;
        
        /*display: flex;
        flex-direction: column;*/
        
        display:grid;
        grid-template-rows: min-content minmax(0, 1fr);
    }
    .header
    {
    }
    .content
    {
       flex-grow: 1;
       flex-shrink: 1;
       flex-basis: 0;
    }
    
    .quiz-grid
    {
      height: 100%;
      max-height: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) min-content;
      grid-template-areas: 
        "left    main   right" 
        "footer footer footer";
    }
    .quiz-cell-left
    { 
      grid-area: left;
      min-height: 0;
    }
    .quiz-cell-right
    { 
      grid-area: right;
      min-height: 0;
    }
    .quiz-cell-main
    { 
      grid-area: main;
      border: 1px red solid;
      min-height: 0;
    }
    .quiz-cell-footer 
    { 
      grid-area: footer;
      justify-self: center;
      align-self: center;
    }
    
    /* my scroll view component */
    .scroll-container
    {
      position: relative;
      width: 100%;
      min-height: 0;
      background-color: azure;
    
      
      max-height: 100%;
    }
    .scroll-content
    {
      height: 100%;
      width: 100%;
      overflow-y: auto;
    }
</style>
</head>
<body>

<div class="page">
  <div class="header">Header</div>
  
  <div class="content">
<div class="quiz-grid">
  <div class="quiz-cell-main">
    
    <div class="scroll-container">        <div class="scroll-content">
    <h1>something</h1>
    <h1>else</h1>
    <h1>alice</h1>
    <h1>cat</h1>
    <h1>or dog</h1>
    <h1>now</h1>
    <h1>world</h1>
    <h1>something</h1>
    <h1>else</h1>
    <h1>alice</h1>
    <h1>cat</h1>
    <h1>or dog</h1>
    <h1>now</h1>
    <h1>world</h1>
    <h1>something</h1>
    <h1>else</h1>
    <h1>alice</h1>
    <h1>cat</h1>
    <h1>or dog</h1>
    <h1>now</h1>
    <h1>world</h1>
    <h1>something</h1>
    <h1>else</h1>
    <h1>alice</h1>
    <h1>cat</h1>
    <h1>or dog</h1>
    <h1>now</h1>
    <h1>world</h1>
    
     </div>
   </div> 
    
  </div>
  
  <div class="quiz-cell-footer">
    footer
  </div>
</div>
  </div>
</div>

</body>
</html>

代码说明：内容位于“main”单元格中，其他元素（header、footer）用于确保解决方案不会过于简化。

更新记录 #

更新1：最初我使用flex进行外层布局，后来换成grid，至少实现了部分裁剪，但滚动功能仍未解决。

更新2：从技术上看似乎解决了问题（正在排查潜在问题）——我将双div滚动容器也基于grid实现，设置grid-template-rows: minmax(0, auto);，但这其实是误打误撞，我只是发现grid会传递高度信息，尝试后可行。但我仍疑惑为什么flex不适合外层布局，以及如何不借助grid将高度信息传递给双div滚动容器（我并不排斥grid，但这样下去我可能会到处用grid）。

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