我正在使用以下网格布局：
grid-template-columns: 10em 1fr 10em;
grid-template-rows: 2em 1fr 2em;
创建一个中心区域，该区域填充屏幕的大部分内容，同时在屏幕周围保留一些填充。在此1fr x 1fr网格区域内是一个pane div，其中包含一个editor div，其中一个content div。
content div可以为任意高度，并且editor div设置为overflow: scroll。我的问题是，pane不会editor保持相同的大小并pane处理溢出，而是会增长并导致整个页面滚动。
我可以通过设置pane来阻止overflow: scroll的增长，但这会使编辑器本身滚动而不是滚动。这是不可接受的，因为编辑器的按钮必须始终显示在屏幕上。
在网格布局中是否有一种方法可以允许此功能？我最初使用的是flex布局，其中pane div是100% x 100% flexbox中的单个项目。我改用网格以方便地调整侧面菜单的大小，因此在不使用网格的情况下实施此方法不是可取的。
此外，对多浏览器的支持将是惊人的，但是我的目标浏览器是Chrome。
Here's a jsfiddle with my reproducing my problem.
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#site {
width: 100%;
height: 100%;
background-color: #000;
display: grid;
grid-template-rows: 10em 1fr 10em;
grid-template-columns: 2em 1fr 2em;
grid-template-areas:
'top top top'
'lpn mid rpn'
'bot bot bot';
}
#pane {
grid-area: mid;
height: 100%;
width: 100%;
background-color: #f0f;
}
#editor {
display: relative;
overflow: scroll;
}
#content {
height: 2000px;
}<div id='site'>
<div id='pane'>
<div id='editor'>
<div id='content'>
</div>
</div>
</div>
</div>
答案 0 :(得分：3)
min-width: auto / min-height: auto 通常来说，网格项目不能小于其内容。网格项目的默认最小大小为min-width: auto和min-height: auto。
这通常会导致网格项溢出其网格区域或网格容器。由于无法触发溢出条件（网格项目一直在扩展），因此它还可以防止滚动条在项目上呈现。
要覆盖此默认值（并允许网格项目缩小到其内容大小以上），可以将min-width: 0，min-height: 0或overflow与visible以外的任何其他值一起使用。
此行为（参考官方文档）在这篇文章中进行了解释：
1fr 要注意的另一件事是1fr的意思是minmax(auto, 1fr)。同样，这意味着它所应用的轨道不能缩小到内容大小以下（即minmax()函数中的 min 值为auto，这意味着内容-
因此，要覆盖此设置，请使用minmax(0, 1fr)而不是1fr。
此处有更多详细信息：https://github.com/w3c/csswg-drafts/issues/1777
修订后的演示（已在Chrome，Firefox和Edge中测试）
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#site {
width: 100%;
height: 100%;
background-color: #000;
display: grid;
/* grid-template-rows: 10em 1fr 10em; */
grid-template-rows: 10em minmax(0, 1fr) 10em; /* new */
grid-template-columns: 2em 1fr 2em;
grid-template-areas:
'top top top'
'lpn mid rpn'
'bot bot bot';
}
#pane {
grid-area: mid;
height: 100%;
width: 100%;
background-color: #f0f;
overflow: auto; /* new */
}
#editor {
/* display: relative; */
/* overflow: scroll; */
}
#content {
height: 2000px;
}<div id='site'>
<div id='pane'>
<div id='editor'>
<div id='content'></div>
</div>
</div>
</div>
答案 1 :(得分：1)
不确定100％是否是您要的。我在内容上添加了一个包装使其可滚动，并在其上设置了vh高度，您可以对其进行调整。
#content-scroll {
height: 40vh;
overflow: scroll;
}
#content {
height: 2000px;
}
<div id='site'>
<div id='pane'>
<div id='editor'>
<div id='content-scroll'>
<div id='content'>
</div>
</div>
</div>
</div>
</div>