html - 防止网格区域扩大导致整个页面滚动

Question

我正在使用以下网格布局:

grid-template-columns: 10em 1fr 10em;
grid-template-rows: 2em 1fr 2em;

创建一个居中区域，填充大部分屏幕，同时在其周围留下一些填充。在此 1fr x 1fr网格区域是 pane包含 editor 的 div包含 content 的 div分区
content div 可以是任意高度， editor div 有 overflow: scroll放。我的问题是，而不是 pane保持相同的尺寸和 editor处理溢出， pane增长并导致整个页面滚动。

我可以保留 pane通过设置其 overflow: scroll 来增长，但这会导致编辑器本身滚动，而不是其内容。这是 Not Acceptable ，因为编辑器具有必须始终在屏幕上的按钮。

有没有办法在网格布局中允许这个功能？我最初使用的是 flex 布局，其中 pane div 是 100% x 100% 中的单个元素 flex 盒。我切换到网格以允许我轻松调整侧边菜单的大小，因此在没有网格的情况下实现这一点并不可取。

此外，多浏览器支持会很棒，但我的目标浏览器是 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>

Answer 1

min-width: auto/min-height: auto
一般来说，网格项不能小于其内容。网格项的默认最小尺寸为 min-width: auto和 min-height: auto .

这通常会导致网格元素溢出其网格区域或网格容器。它还可以防止滚动条在元素上呈现，因为无法触发溢出条件(网格元素只是不断扩展)。

要覆盖此默认值(并允许网格项缩小超过其内容大小)，您可以使用 min-width: 0 , min-height: 0或 overflow具有除 visible 以外的任何值.

这种行为，引用官方文档，在这篇文章中有解释:

Prevent content from expanding grid items

1fr
另外要注意的是 1fr意味着 minmax(auto, 1fr) .这再次意味着应用它的轨道不能缩小到内容大小以下(即 minmax() 函数中的最小值是 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>

jsFiddle demo