CSS Grid与overflow兼容问题：滚动文本框超出布局范围求助

问题描述 #

红色.fullscreen div需要完全占满屏幕；下方绿色#textbox作为滚动文本框，无法遵守指定的Grid布局与padding规则。移除中间蓝色Grid容器或上方绿色块后，文本框表现正常；为文本框所在Grid行指定固定高度也能解决问题，但不符合“让它占据剩余垂直空间”的需求。

原因分析 #

嵌套Grid结构中存在默认高度约束：Grid布局里的1fr行默认以**内容最小高度（min-content）**为下限，当文本框内容过多时，1fr行会被内容撑开，导致内层Grid整体高度超出父容器限制，进而忽略padding和布局规则。同时，内层Grid作为外层Grid的子项，虽会被拉伸到外层高度，但Grid自身的min-height: auto特性会优先保证内容高度，导致剩余空间分配失效。

解决方法 #

有两种简洁的修复方式：

方法1：给内层Grid添加min-height: 0 #

打破Grid默认的min-content高度限制，让内层Grid可以被父容器约束高度，从而正确计算1fr行的剩余空间：

.grid {
  display: grid;
  grid-template-rows: 1fr;
  border: solid 4px blue;
  padding: 16px;
  min-height: 0; /* 添加这一行 */
}

方法2：将内层Grid的1fr行改为minmax(0, 1fr) #

直接给行高设置下限为0，强制1fr行可以被压缩，确保文本框在剩余空间内显示并出现滚动条：
修改内层Grid的行模板：

<div class="grid" style="grid-template-rows: min-content minmax(0, 1fr); gap: 16px;">

修复后的完整代码示例 #

HTML #

<div class="fullscreen grid">
  <div class="grid" style="grid-template-rows: min-content minmax(0, 1fr); gap: 16px;">
    <div style="border: solid green 4px; padding: 16px;"></div>
    <div id=textbox></div>
  </div>
</div>

CSS #

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  overflow: hidden;
}

.grid {
  display: grid;
  grid-template-rows: 1fr;
  border: solid 4px blue;
  padding: 16px;
  min-height: 0; /* 可选，配合方法1使用 */
}

.fullscreen {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100vh;
  width: 100vw;
  border: solid 4px red;
}

#textbox {
  padding: 4px;
  width: 100px;
  overflow-y: auto;
  border: solid green 4px;
}

JavaScript #

let box = document.getElementById('textbox');
for (let i = 0; i < 100; i++)
  box.innerHTML += 'Lorem Ipsum ';

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