有一篇关于将 1fr 修剪为 0 的非常好的帖子：为什么 minmax(0, 1fr) 对于长元素有效，而 1fr 则不然？
一般来说，我希望有一个单元格随着内容的增长而扩展，但在其父级的限制内。
目前我有一个网格，其中的单元格内容很长，即使不扩展它也比整个屏幕大。所以我要做两件事——剪辑单元格的大小，其次——提供滚动。
我使用了我提到的帖子中的
minmax(0, 1fr)<!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”中，其他元素（页眉、页脚）只是为了确保解决方案不会过度简化。
更新1：最初我使用“flex”进行外部布局，我切换到网格并且至少成功实现了部分剪辑，我仍然坚持使用带有滚动的真实剪辑。
更新2：从技术上来说似乎我解决了它（我现在正在研究隐藏的问题）——我基于网格上的两格滚动器以及容器滚动器“grid-template-rows：minmax（0 , auto);”，但说实话，这太运气了，我只是注意到网格传播高度信息，所以也许它会起作用。但我仍然想知道为什么“flex”不适用于外部布局，以及如何在不诉诸网格的情况下将高度信息“传递”到滚动条两格（我不反对网格，但按照这个速度，我将到处都有网格：- )).
你的代码包含很多无用的声明。我们不应该试图通过添加大量高度/最小高度/最大高度等来强迫事情正常工作。
body {
margin: 0;
}
.page {
height: 100vh; /* full page*/
display: grid;
grid-template-rows: min-content minmax(0,1fr);
}
.quiz-grid {
height: 100%; /* 100% .content height (.content needs nothing)*/
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-main {
grid-area: main;
border: 1px red solid;
}
.scroll-container {
background-color: azure;
height: 100%; /* 100% height of .quiz-cell-main */
overflow-y: auto; /* add scrollbar */
}
.quiz-cell-footer {
grid-area: footer;
place-self: center;
}
/*.quiz-cell-left {
grid-area: left;
min-height: 0;
}
.quiz-cell-right {
grid-area: right;
min-height: 0;
}
*/<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>